Las animaciones CSS de Primer se utilizan para hacer que la página web sea más interesante y para mejorar la experiencia del usuario.
En este artículo, veremos cómo se desvanece la animación de Primer CSS.
Esta animación se utiliza para deslizar hacia abajo un elemento ocultándolo. Esta animación debe usarse en un contenedor con su propiedad de desbordamiento configurada como oculta o el contenedor debe estar en la parte inferior de la página. Para usar esta animación , se usa la clase anim-fade-down en el elemento.
Primer CSS Fade down Clases de animación:
- anim-fade-down: esta clase se usa en un elemento para aplicarle una animación de atenuación.
Sintaxis:
<div class="anim-fade-down">
...
</div>
Ejemplo 1: este ejemplo muestra cómo usar la clase anim-fade-down para aplicar una animación de atenuación a un elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fade Down Animation - Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Fade Down Animation - Primer CSS</h4> </div> <div class="overflow-hidden d-flex flex-justify-center"> <div class="anim-fade-down"> <p>Fade Down Text</p> </div> </div> </body> </html>
Producción:
Primer CSS Desvanecimiento de animación con texto
Ejemplo 2: El siguiente ejemplo muestra el uso de la animación de atenuación en el elemento de imagen.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fade Down Animation - Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Fade Down Animation on Image - Primer CSS</h4> </div> <div class="overflow-hidden d-flex flex-justify-center"> <div class="anim-fade-down"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220112153639/gfglogo-300x152.png" alt="geeksforgeeks-logo"/> </div> </div> </body> </html>
Producción:
Animación de desvanecimiento de Primer CSS con imagen
Referencia: https://primer.style/css/utilities/animations#fade-down