Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. La clase de propiedad de transición se utiliza para especificar el nombre de la propiedad CSS para la que se producirá el efecto de transición. En CSS, lo hemos hecho usando la propiedad de transición de CSS .
Clases de propiedades de transición:
- Transition-none: este valor se utiliza para especificar que ninguna clase obtendrá un efecto de transición.
- Transition-all: toda la clase obtendrá un efecto de transición. Este es también el valor predeterminado para esta clase.
- transición: podemos especificar los nombres de las propiedades CSS para las que se aplicará el efecto de transición. También podemos especificar varias propiedades separándolas con una coma.
- Transition-colors: este valor se usa para especificar que la clase de color obtendrá un efecto de transición.
- Transition-opacity: este valor se usa para especificar que la clase de opacidad obtendrá un efecto de transición.
- transición-sombra: este valor se usa para especificar que la clase de sombra obtendrá un efecto de transición.
- transición-transformación: Este valor se utiliza para especificar que la transformación en una forma definida.
Sintaxis:
<element class="transition-{properties}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Transition Property Class</b> <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> <button class="transition duration-500 ease-in-out bg-green-300 hover:bg-green-600 transform hover:-translate-y-1 hover:scale-110 rounded-lg p-4 border border-green-900"> Hover me </button> <button class="transition-opacity duration-500 ease-in-out bg-green-300 hover:opacity-75 transform hover:-translate-y-1 hover:scale-110 rounded-lg p-4 border border-green-900"> Hover me </button> <button class="transition-none duration-500 ease-in-out bg-green-300 hover:bg-green-600 transform hover:-translate-y-1 hover:scale-110 rounded-lg p-4 border border-green-900"> Hover me </button> <button class="transition-colors duration-500 ease-in-out bg-green-300 hover:bg-yellow-600 transform hover:scale-110 rounded-lg p-4 border border-green-900 hover:border-black"> Hover me </button> </div> </body> </html>
Producción:
clase de propiedad diferente
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA