Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. La clase de duración de transición se utiliza para especificar el tiempo (en segundos o milisegundos) para completar el efecto de transición. En CSS, lo hemos hecho usando la transición-duración de CSS .
Clases de duración de la transición:
- duración-75: Esta clase se utiliza para tomar el tiempo de transición de 75ms.
- duración-100: Esta clase se utiliza para tomar el tiempo de transición de 100ms.
- duración-150: Esta clase se utiliza para tomar el tiempo de transición de 150ms.
- duración-200: Esta clase se utiliza para tomar el tiempo de transición de 200ms.
- duración-300: Esta clase se utiliza para tomar el tiempo de transición de 300ms.
- duración-500: Esta clase se utiliza para tomar el tiempo de transición de 500ms.
- duración-700: Esta clase se utiliza para tomar el tiempo de transición de 700ms.
- duración-1000: Esta clase se utiliza para tomar el tiempo de transición de 1000ms.
Sintaxis:
<element class="duration-{amount}">...</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 Duration Class</b> <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> <button class="transition duration-75 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 duration-100 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 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 duration-1000 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> </div> </body> </html>
Producción:
clase de duración 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