Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. La clase de función de tiempo de transición se usa para especificar el tiempo que usa una animación para cambiar de un conjunto de transiciones CSS a otro. En CSS, lo hemos hecho usando la función de tiempo de transición de CSS.
Clases de funciones de temporización de transición:
- Ease-linear: En este, la animación tiene la misma velocidad de principio a fin.
- Eaceleración: Esto es similar a la aceleración donde el final de la animación es rápido.
- Eaceleración: Esto es similar a la aceleración donde el inicio de la animación es rápido.
- facilidad de entrada: Esto establece la clase a su valor predeterminado.
Sintaxis:
<element class="ease-{timing}">...</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 Timing Function Class</b> <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> <button class="transition duration-700 ease-in 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 for ease-in </button> <button class="transition duration-700 ease-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 for ease-out </button> <button class="transition duration-700 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 for ease-in-out </button> <button class="transition duration-700 ease-linear 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 for ease-linear </button> </div> </body> </html>
Producción:
Tiempo de transición
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA