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. Primer CSS Grow x Animation aumenta el ancho del elemento de 0 a 100 muy rápidamente. En este artículo, discutiremos Primer CSS Grow x Animation.
Primer CSS Grow x Clase de animación:
- anim-grow-x: esta clase se usa para aumentar el ancho del elemento de 0 a 100 rápidamente.
Sintaxis:
<div class="anim-grow-x py-2
color-bg-success-emphasis">
</div>
Ejemplo 1: El siguiente ejemplo demuestra Primer CSS Grow x Animation.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grow x 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 Grow x Animation </h3> <br> <div class="anim-grow-x py-2 color-bg-accent-emphasis"> </div> </div> </body> </html>
Producción:
Cartilla CSS Crecimiento x Animación
Ejemplo 2: El siguiente ejemplo demuestra Primer CSS Grow x Animation.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grow x 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 Grow x Animation </h3> <br> <div class="anim-grow-x py-4 color-bg-done-emphasis"> </div> <br> <div class="anim-grow-x py-3 color-bg-attention-emphasis"> </div> <br> <div class="anim-grow-x py-2 color-bg-danger-emphasis"> </div> <br> <div class="anim-grow-x py-1 color-bg-success-emphasis"> </div> <br> </div> </body> </html>
Producción:
Cartilla CSS Crecimiento x Animación
Referencia: https://primer.style/css/utilities/animations#grow-x
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA