Flux is a library of ready-to-use, cross-browser animations for use
in your web projects. Great for emphasis, home pages, sliders, and attention-guiding
hints.
Installation and Usage
Installing via CDN
Add Flux directly to your webpage using jsDelivr:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/cognisutra/Flux@main/docs/animate.min.css"
/>
</head>
Basic usage
After installing Flux, add the class fl-animated to an element, along
with any of the animation names (don't forget the
fl- prefix!):
<h1 class="fl-animated fl-bounce">An animated element</h1>
That's it! You've got a CSS animated element. Super!
Animations can improve the UX of an interface, but keep in mind that they can also
get in the way of your users! Please read the
best practices and
gotchas sections to bring your web-things to life in the
best way possible.
Using @keyframes
Even though the library provides you a few helper classes like the
animated class to get you up running quickly, you can directly use the
provided animations keyframes. This provides a flexible way to use Flux
with your current projects without having to refactor your HTML code.
Example:
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
Be aware that some animations are dependent on the
animation-timing property set on the animation's class. Changing or not
declaring it might lead to unexpected results.
CSS Custom Properties (CSS Variables)
Since version 4, Flux uses custom properties (also known as CSS variables) to define
the animation's duration, delay, and iterations. This makes Flux very flexible and
customizable. Need to change an animation duration? Just set a new value globally or
locally.
Example:
/* This only changes this particular animation duration */
.fl-animated.fl-bounce {
--fl-duration: 2s;
}
/* This changes all the animations globally */
:root {
--fl-duration: 800ms;
--fl-delay: 0.9s;
}
Custom properties also make it easy to change all your animation's time-constrained
properties on the fly. It means that you can have a slow-motion or time-lapse effect
with a javascript one-liner:
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--fl-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--fl-duration', '.5s');
Even though some aging browsers do not support custom properties, Flux provides a
proper fallback, widening its support for any browser that supports CSS animations.
Utility Classes
Flux comes packed with a few utility classes to simplify its use.
Delay classes
You can add delays directly on the element's class attribute, just like this:
<div class="fl-animated fl-bounce fl-delay-2s">Example</div>
Flux provides the following delays:
| Class name |
Default delay time |
fl-delay-2s |
2s |
fl-delay-3s |
3s |
fl-delay-4s |
4s |
fl-delay-5s |
5s |
The provided delays are from 1 to 5 seconds. You can customize them setting the
--fl-delay property to a longer or a shorter duration:
/* All delay classes will take 2x longer to start */
:root {
--fl-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--fl-delay: 0.5s;
}
Slow, slower, fast, and Faster classes
You can control the speed of the animation by adding these classes, as below:
<div class="fl-animated fl-bounce fl-faster">Example</div>
| Class name |
Default speed time |
fl-slow |
2s |
fl-slower |
3s |
fl-fast |
800ms |
fl-faster |
500ms |
The fl-animated class has a default speed of 1s. You can
also customize the animations duration through the
--fl-duration property, globally or locally. This will affect both the
animations and the utility classes. Example:
/* All animations will take twice as long to finish */
:root {
--fl-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--fl-duration: 0.5s;
}
Notice that some animations have a duration of less than 1 second. As we used the
CSS calc() function, setting the duration through the
--animation-duration property will respect these ratios. So, when you
change the global duration, all the animations will respond to that change!
Repeating classes
You can control the iteration count of the animation by adding these classes, like
below:
<div class="fl-animated fl-bounce fl-repeat-2">Example</div>
| Class Name |
Default iteration count |
fl-repeat-1 |
1 |
fl-repeat-2 |
2 |
fl-repeat-3 |
3 |
fl-infinite |
infinite |
As with the delay and speed classes, the fl-repeat class is based on
the --fl-repeat property and has a default iteration count of
1. You can customize them by setting the
--fl-repeat property to a longer or a shorter value:
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--fl-repeat: 2;
}
Notice that fl-infinite doesn't use any custom property, and changes to
--fl-repeat will have no effect. Don't forget to read the
best practices section to make the best use of
repeating animations.
Best Practices
Animations can greatly improve an interface's UX, but it's important to follow some
guidelines to not overdo it and deteriorate the user experience on your web-things.
Following the following rules should provide a good start.
Meaningful animations
You should avoid animating an element just for the sake of it. Keep in mind that
animations should make an intention clear. Animations like attention seekers
(bounce, flash, pulse, etc) should be used to bring the user's attention to
something special in your interface and not only as a way to bring
"flashiness" to it.
Entrances and exit animations should be used to orientate what is happening in the
interface, clearly signaling that it's transitioning into a new state.
It doesn't mean that you should avoid adding playfulness to the interface, just be
sure that the animations are not getting in the way of your user and that the page's
performance is not affected by an exaggerated use of animations.
Don't animate large elements
Avoid it as it won't bring much value to the user and will probably only cause
confusion. Besides that, there is a good chance that the animations will be junky,
culminating in bad UX.
Don't animate root elements
Animating the <html/> or <body/> tags is
possible, but you should avoid it. There were some reports pointing out that this
could trigger some weird browser bugs. Besides, making the whole page bounce would
hardly provide good value to your UX. If you indeed need this sort of effect, wrap
your page in an element and animate it, like this:
<body>
<main class="fl-animated fl-fadeInLeft">
<!-- Your code -->
</main>
</body>
Infinite animations should be avoided
Even though Flux provides utility classes for repeating animations, including an
infinite one, you should avoid endless animations. It will just distract your users
and might annoy a good slice of them. So, use it wisely!
Mind the initial and final state of your elements
All the Flux animations include a CSS property called
animation-fill-mode, which controls the states of an element before and
after animation. You can read more about it
here. Flux defaults to animation-fill-mode: both, but you can change it to
suit your needs.
Don't disable the prefers-reduced-motion media query
Since version 3.7.0 Flux supports the prefers-reduced-motion media
query which disables animations based on the OS system's preference on supporting
browsers (most current browsers support it). This is a
critical accessibility feature and should never be disabled! This
is built into browsers to help people with vestibular and seizure disorders. You can
read more about it
here. If your web-thing needs the animations to function, warn users, but don't disable
the feature. You can do it easily with CSS only. Here's a simple example:
Gotchas
You can't animate inline elements
Even though some browsers can animate inline elements, this goes against the CSS
animation specs and will break on some browsers or eventually cease to work. Always
animate block or inline-block level elements (grid and flex containers and children
are block-level elements too). You can set an element to
display: inline-block when animating an inline-level element.
Overflow
Most of the Flux animations will move elements across the screen and might create
scrollbars on your web-thing. This is manageable using the
overflow: hidden property. There's no recipe to when and where to use
it, but the basic idea is to use it in the parent holding the animated element. It's
up to you to figure out when and how to use it,
this guide
can help you understand it.
Intervals between repeats
Unfortunately, this isn't possible with pure CSS right now. You have to use
Javascript to achieve this result.
Usage with Javascript
You can do a whole bunch of other stuff with Flux when you combine it with
Javascript. A simple example:
const element = document.querySelector('.my-element');
element.classList.add('fl-animated', 'fl-bounceOutLeft');
You can detect when an animation ends:
const element = document.querySelector('.my-element');
element.classList.add('fl-animated', 'fl-bounceOutLeft');
element.addEventListener('animationend', () => {
// do something
});
or change its duration:
const element = document.querySelector('.my-element');
element.style.setProperty('--fl-duration', '0.5s');
You can also use a simple function to add the animations classes and remove them
automatically:
const animateCSS = (element, animation, prefix = 'fl-') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
And use it like this:
animateCSS('.my-element', 'bounce');
// or
animateCSS('.my-element', 'bounce').then((message) => {
// Do something after the animation
});
If you had a hard time understanding the previous function, have a look at
const,
classList,
arrow functions, and
Promises.