Smooth, performant CSS animations
by Cognisutra
🌐 Live Demo · 📦 Install · 🚀 Usage · 📚 Docs
CDN (via jsDelivr):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cognisutra/Flux@main/docs/animate.min.css" />npm (coming soon)
Add the fl-animated class to any element, along with an animation name:
<h1 class="fl-animated fl-bounce">Hello, world!</h1>Browse all 97 animations on the live demo.
| Attribute | Example | Description |
|---|---|---|
fl- prefix |
fl-bounce, fl-fadeIn |
Animation name |
--fl-duration |
style="--fl-duration: 2s" |
Duration |
--fl-delay |
style="--fl-delay: 0.5s" |
Delay |
--fl-repeat |
style="--fl-repeat: 3" |
Repeat count |
| Category | Animations |
|---|---|
| Attention | bounce, flash, pulse, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat |
| Back | backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp |
| Bouncing | bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp |
| Fading | fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeInTopLeft, fadeInTopRight, fadeInBottomLeft, fadeInBottomRight, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, fadeOutTopLeft, fadeOutTopRight, fadeOutBottomLeft, fadeOutBottomRight |
| Flip | flip, flipInX, flipInY, flipOutX, flipOutY |
| Lightspeed | lightSpeedInRight, lightSpeedInLeft, lightSpeedOutRight, lightSpeedOutLeft |
| Rotating | rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight |
| Slide | slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp |
| Zoom | zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp |
| Specials | hinge, jackInTheBox, rollIn, rollOut |
Flux respects the prefers-reduced-motion media query — users with motion sensitivity can opt out via their OS settings.
MIT · by Cognisutra