Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se utiliza para animar elementos con animación CSS. En CSS, podemos hacerlo usando la propiedad de animación CSS.
Clases de animación:
- animate-spin: esta clase se usa para agregar una animación de giro lineal a los elementos.
- animate-ping: esta clase se usa para hacer que un elemento se escale y se desvanezca como un ping de radar o una onda de agua.
- animate-bounce: esta clase se usa para hacer que un elemento rebote hacia arriba y hacia abajo.
- animate-pulse: esta clase se usa para hacer que un elemento aparezca y desaparezca suavemente.
Sintaxis:
<element class="animate-{animation_name}">...</element>
Ejemplo 1: el siguiente código implementa las clases animation-spin y animation-ping .
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 Animation</b> <div class="m-auto ml-10 h-20 w-20 bg-green-300 animate-spin"> Spin </div> <div class="m-auto mt-0 h-20 w-20 bg-green-500 animate-ping"> Ping </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código implementa las clases animation-bounce y animation-pulse .
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 Animation</b> <div class=" m-auto ml-10 h-20 w-20 bg-green-600 animate-pulse"> Pulse </div> <div class="m-auto mt-0 h-20 w-20 bg-green-700 animate-bounce"> Bounce </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA