Easy animations in your HTML
How to compose customizable animations in HTML with AnimXYZ
I'm a big fan of declaring as much as possible in the markup. The ability to instantly see what's happening is most readable in my opinion.
What is AnimXYZ and why should you care
There is a new toolkit on the block. Meet AnimXYZ. A composable CSS animation toolkit. All you have to do is install it and add a simpel attribute to your html.
Guess what this will do:
<div class="square xyz-in" xyz="fade-25% rotate-right-50%"></div>
The square will fade and rotate to the right when the element appears.
Another example with a group of elements that chain their animations.
- Your animations are composable right in the markup
- You can customize the variables if the defaults aren't enough
- You don't have to write keyframes
- Really easy to start with
I like it when my markup tells me what it does. Animxyz helps me with this. It's easy to learn and easy to work with. It took me only a couple of minutes to install and create the Codepen example. Try it out yourself. Love to see what crazy animations your can make in just a couple of minutes.