AnimXYZ – Animaciones para React, Vue y HTML & CSS


¿Qué es AnimXYZ?

AnimXYZ es una biblioteca de animación CSS para crear animaciones CSS personalizadas para tu sitio web. Lo que hace que AnimXYZ sea tan bueno es que se puede componer, lo que significa que puede combinar y mezclar diferentes animaciones para crear tus propias animaciones CSS altamente personalizables sin tener que escribir un solo fotograma o como dicen los creadores de AnimXYZ:

«Hacer una animación es tan simple como describirla con palabras»

Affiliated Ad

Por ejemplo, puedes crear una animación que se desvanece, se escala y se mueve hacia arriba con AnimXYZ escribiendo xyz = «fade big up». AnimXYZ también viene en un paquete pequeño de 2.68kB para las funcionalidades básicas y 11.4kb si incluye utilidades más complejas.


fade big up

Personalización


AnimXYZ funciona con variables CSS, AnimXYZ te permite anular cualquiera de las variables CSS para una mayor personalización / control de las animaciones y casi un número ilimitado de animaciones personalizadas. Puedes editar una variable CSS AnimXYZ seleccionando el elemento con el atributo xyz en su CSS y cambiando el valor de una de las variables AnimXYZ definidas como esta:

.my-class-name {
  --xyz-opacity: 0.5;
}


Todas las variables AnimXYZ tienen el prefijo xyz al principio y luego suelen ir seguidas del nombre de la propiedad CSS que afectará a que haya variables de entrada, salida o ambas. –xyz-opacity es una variable general. Existen muchas variables definidas. Para obtener más información sobre ellas, haga clic aquí.

Animaciones anidadas


AnimXYZ admite animaciones anidadas, lo que nos permite animar varios elementos si los envolvemos en nuestro elemento de animación (el elemento con el atributo xyz). Una animación anidada se parece a esto.

<div class="my-class-name" xyz="fade">
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
</div>

Esto hará que todos los elementos envueltos en .my-name-element se desvanezcan al mismo tiempo.

Animación anidada

Animaciones escalonadas

Si no queremos que la animación anidada ocurra al mismo tiempo, estamos de suerte porque AnimXYZ también admite animaciones escalonadas, esto significa que si tenemos una animación anidada podemos hacer que cada elemento llegue / salga uno tras otro. Podemos hacer esto agregando stagger al atributo xyz, esto hará que la animación se tambalee de izquierda a derecha. También podemos revertir el escalonamiento usando stagger-rev, por lo que ahora se escalonará de derecha a izquierda.

Animación escalonada

Enlaces (en inglés)

Puedes ver el artículo original en inglés en: https://itnext.io/worlds-first-composable-css-animation-toolkit-for-react-vue-plain-html-css-animxyz-1cd0b8229da1

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *