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 use the provided animations keyframes directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.
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 Animate.css with your current projects without having to refactor your HTML code.
Example:
.my-element {
display: inline-block;
@@ -919,7 +919,7 @@
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, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.
+Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css 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 */
.animate__animated.animate__bounce {
@@ -932,14 +932,14 @@
--animate-delay: 0.9s;
}
Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:
+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('--animate-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
+Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
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!
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="animate__animated animate__bounce animate__repeat-2">Example</div>
@@ -1070,7 +1070,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
--animate-repeat: 2;
}
Notice that animate__infinite doesn't use any custom property and changes to --animate-repeat will have no effect on it. Don't forget to read the best practices section to make the best use of repeating animations.
Notice that animate__infinite doesn't use any custom property, and changes to --animate-repeat will have no effect. Don't forget to read the best practices section to make the best use of repeating animations.
Infinite animations should be avoided
Even though Animate.css 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 Animate.css 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. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.
All the Animate.css 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. Animate.css 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 Animate.css 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:
@@ -1170,9 +1170,9 @@ animateCSS('.my-element', 'bounce').then((message) => {
Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to But fear not! Although the default build, If you're using a bundler, just update your import: If you're using a bundler, update your import: from: Notice that depending on your project's configuration, this might change a bit. In case of using a CDN, just update the link on your HTML: In case of using a CDN, update the link in your HTML: from: Animate.css supports the Animate.css supports the Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT) Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important. Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and let us see a demo of submitted animations in a pen. That last one is important. This project and everyone participating in it are governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com. This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com.Migration from v3.x and under
-animate__ - so a direct migration is not possible.animate__ - so a direct migration is impossible.animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).
@@ -1180,7 +1180,7 @@ animateCSS('.my-element', 'bounce').then((message) => {
import 'animate.min.css';
import 'animate.compat.css';
<head>
<link
@@ -1248,7 +1248,7 @@ $ npm install
Accessibility
-prefers-reduced-motion media query so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.License and Contributing
Contributing
-Code of Conduct
-