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. Primer CSS Fade-up Animation se usa para animar el elemento deslizándolo desde debajo del área de plegado usando la clase anim-fade-up .
En este artículo, discutiremos Primer CSS Fade up Animation.
Primer CSS Fade up Clase de animación:
- anim-fade-up: esta clase se usa para animar el elemento hacia arriba desde abajo.
Sintaxis:
<div class="anim-fade-up">
...
</div>
Ejemplo 1: Este ejemplo demuestra el uso de la animación Primer CSS Fade up para animar el texto.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade up 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 up Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="anim-fade-up"> <h4> GeeksforGeeks Fade up </h4> </div> </div> </body> </html>
Producción:
Primer CSS Fade up Animación
Ejemplo 2: Este ejemplo demuestra el uso de Primer CSS Fade up Animation para animar el ícono.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Fade up 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 up Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="anim-fade-up"> <svg class="octicon" viewBox="0 0 16 16" width="50" height="50" > <path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z" > </path> </svg> </div> </div> </body> </html>
Producción:
Primer CSS Fade up Animación
Referencia: https://primer.style/css/utilities/animations#fade-up
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