Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Animation se usa para enfatizar el elemento usando las clases reutilizables. La animación Primer CSS Fade out se utiliza para atenuar el elemento en la pantalla. Esta animación ocurre solo una vez cuando se revela el elemento.
En este artículo, discutiremos Primer CSS Fade out Animation.
Primer CSS Fade out Clase de animación:
- anim-fade-out: esta clase se utiliza para desvanecer un elemento en la pantalla.
Sintaxis:
<span class="anim-fade-out"> ... </span>
Ejemplo 1: Este ejemplo demuestra el uso de la animación Primer CSS Fade out para animar el texto.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade out Animation </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Fade out Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <span class="anim-fade-out"> <h4> GFG Fade out </h4> </span> </div> </body> </html>
Producción:
Primer CSS Fade out Animación
Ejemplo 2: Este ejemplo demuestra el uso de Primer CSS Fade out Animation para animar el ícono SVG.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade out Animation </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Fade out Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <span class="anim-fade-out"> <svg class="octicon" viewBox="0 0 16 16" width="50" height="50" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" > </path> </svg> </span> </div> </body> </html>
Producción:
Primer CSS Fade out Animación
Referencia: https://primer.style/css/utilities/animations#fade-out
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA