Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Las utilidades Tailwind CSS Transitions controlan la transición y la animación de los elementos. proporciona clases de transición como propiedad de transición, duración, función de tiempo, retraso para administrar elementos perfectamente.
- Propiedad de transición CSS Tailwind
- Duración de la transición de Tailwind CSS
- Función de temporización de transición CSS Tailwind
- Retraso de transición CSS Tailwind
El siguiente ejemplo le dará una breve idea sobre las transiciones y la animación de Tailwind CSS:
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:
Tailwind CSS Transiciones y Animación
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA