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