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.
Las animaciones son las cosas más comunes en la web. Animaciones en sentido de movimientos que se pueden usar en botones, formularios o cualquier otro componente. Entonces, Primer CSS nos proporciona clases de animaciones que puede usar para enfatizar un elemento.
Hay nueve tipos de animación en la animación Primer CSS, todos tienen clases individuales que se requieren para realizar esa animación.
En este artículo no describiremos las clases en detalle, todas ellas se describen brevemente a continuación.
Primer CSS animaciones:
- Fade in : la clase anim-fade-in se usa para hacer un fundido de entrada de un elemento en la página. Se ejecutará una vez cuando se revele el elemento.
- Fade out : la clase anim-fade-out se utiliza para atenuar un elemento en la página. Se ejecutará una vez cuando se revele el elemento.
- Fade up : la clase anim-fade-up se usa para atenuar un elemento en la página. Se ejecutará una vez cuando se revele el elemento.
- Fade down : la clase anim-fade-down se usa para atenuar un elemento en la página. Se ejecutará una vez cuando se revele el elemento.
- Scale in: la clase anim-scale-in se usa para escalar el elemento, esto se puede usar en los menús.
- Grow x : la clase anim-grow-x se usa para hacer crecer el ancho de un elemento de 0 a: 100: muy rápido.
- Pulso : la clase anim-pulse se usa para agregar un efecto de pulso en los elementos de la página.
- Animación flotante : la clase anim-hover-grow se usa para agregar cualquier animación al pasar el mouse
- Rotación : la clase anim-rotate se usa para agregar un efecto de rotación en los elementos de la página.
Sintaxis:
<span class="Primer-CSS-Animations">
...
</span>
Ejemplo 1: El siguiente ejemplo ilustra las animaciones CSS de Primer.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Animations </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> <strong>Primer CSS Animations</strong> </div> <div class="m-2 p-2 Box"> <span class="anim-fade-in"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Fade In Animation</span> <span class="anim-fade-out"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Fade Out Animation</span> <span class="anim-fade-up"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Fade Up Animation</span> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra las otras clases de animación enumeradas anteriormente.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Animations </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> <strong>Primer CSS Animations</strong> </div> <div class="m-2 p-2 Box"> <span class="anim-fade-down"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Fade Down Animation</span> <span class="anim-scale-in"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Scale In Animation</span> <span class="anim-grow-x"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Grow X Animation</span> </div> <strong>Primer CSS Hover Animation <div class="m-2 p-2 anim-hover-grow Box"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check anim-rotate" aria-hidden="true"> <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69- .31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31 .69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" /> </svg> <span class="content p-2">Primer CSS Rotate Animation</span> <span class="anim-pulse"> <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true"> <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> </svg> </span> <span class="content p-2">Primer CSS Pulse Animation</span> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/animations
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA