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 Scale in Animation se usa para escalar el elemento usando la clase anim-scale-in . En este artículo, discutiremos la Escala CSS de Primer en Animación.
Primer escala CSS en la clase de animación:
- anim-scale-in: esta clase se utiliza para escalar el elemento.
Sintaxis:
<div class="anim-scale-in">
...
</div>
Ejemplo 1: el siguiente código demuestra la escala Primer CSS en animación.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Scale 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 Scale in Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="anim-scale-in color-bg-success-emphasis color-fg-on-emphasis" > <h4> GeeksforGeeks </h4> </div> </div> </body> </html>
Producción:
Primer escala CSS en animación
Ejemplo 2: el siguiente código demuestra la escala Primer CSS en animación.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Scale 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 Scale in Animation </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="anim-scale-in color-bg-success-emphasis color-fg-on-emphasis" > <svg class="octicon" viewBox="0 0 15 15" width="100" height="100"> <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> </div> </div> </body> </html>
Producción:
Primer escala CSS en animación
Referencia: https://primer.style/css/utilities/animations#scale-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