The first composable
CSS animation toolkit.
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Composable
Making an animation is as simple as describing it in words. Combine a fade with a scale and drop it
from the top! xyz="fade small up"
Customizable
Out-of-the-box utilities not enough? Fine-tune any animation with CSS variables to your heart's
content. Simple as: --xyz-translate-y: 42%;
Nest & Stagger
Stagger lists of elements in both forward and reverse order, while animating nested items in sync with their parents.
Performant
Silky smooth animations out of the box. Only 2.68kB
for base functionality and
11.4kB
if you include convenient utilities.
Less Code
Powerful CSS animations without custom keyframes for every subtle animation need. Less fuss = more fun.
AnimXYZ is used by:
<div class="item-group" xyz="fade">
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
</div>