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.
La Animación se usa para enfatizar el elemento usando las clases de animación reutilizables. Fade in Animation se usa para atenuar el elemento en la pantalla especificando la clase .anim-fade-in . Esta animación ocurre solo una vez cuando se revela el elemento.
Primer CSS Fade en la clase de animación:
- anim-fade-in: esta clase se utiliza para hacer un fundido de entrada del elemento en la pantalla.
Sintaxis:
<span class="anim-fade-in"> Content </span>
Ejemplo 1: Este ejemplo demuestra el uso de la animación Primer CSS Fade-in para animar el texto.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade in 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 in Animation </h3> </div> <br> <div class="d-flex flex-justify-center"> <span class="anim-fade-in"> <h4> GeeksforGeeks Fade in </h4> </span> </div> </body> </html>
Producción:
Primer CSS Fundido en animación
Ejemplo 2: este ejemplo demuestra el uso de la animación de fundido de entrada CSS de Primer para animar el icono SVG.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade in 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 in Animation </h3> </div> <br> <div class="d-flex flex-justify-center"> <span class="anim-fade-in"> <svg class="octicon" viewBox="0 0 15 15" width="35" height="35"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </span> </div> </body> </html>
Producción:
Primer CSS Fundido en animación
Referencia: https://primer.style/css/utilities/animations#fade-in
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