Animate CSS A Cross Browser Library of CSS Animations CSS animations allow web developers to animate HTML elements without needing to use JavaScript or Flash. They enable the transition of an element’s properties over time, which can enhance the visual appeal and user experience of a website.
Animate.css is a versatile library offering ready-to-use, cross-browser animations for your web projects. Animate CSS A Cross Browser Library of CSS Animations It’s perfect for adding emphasis, enhancing home pages, creating engaging sliders, and providing attention-guiding hints.
Table of Contents
Installation and Usage
Installing
Install with npm:
$ npm install animate.css --save
Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):
$ yarn add animate.css
Import it into your file:
import 'animate.css';
Or add it directly to your webpage using a CDN:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
Basic usage
After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don’t forget the animate__ prefix!):
<h1 class="animate__animated animate__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 Animate.css 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, 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 {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-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('--animate-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
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.
With the multitude of web browsers available, ensuring that CSS animations work seamlessly across all of them is crucial. Cross-browser compatibility ensures that all users, regardless of their preferred browser, enjoy a consistent experience.
Overview of Animate CSS
Animate CSS is a popular library that simplifies the implementation of CSS animations. It offers a wide range of predefined animations, which can be easily customized and applied to any element on a webpage. This library streamlines the process of creating engaging and interactive web designs.
Historical Context
Evolution of CSS Animations
CSS animations have evolved significantly since their inception. Initially, web animations were achieved using JavaScript and Flash. However, the introduction of CSS3 brought native support for animations, leading to more efficient and performant web animations.
Key Milestones in CSS Animation Development
Key milestones in the development of CSS animations include the introduction of the @keyframes rule, the transition property, and the standardization of CSS animations across major browsers. These advancements have made CSS animations more accessible and versatile for developers.
Key Concepts
CSS Animation Properties
CSS animations are defined using several key properties, including animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. These properties control various aspects of the animation, such as its duration, delay, and repetition.
Understanding Keyframes
The @keyframes rule specifies the intermediate steps in an animation sequence. It defines the styles that the element will have at specific times during the animation.
Animation Timing Functions
Timing functions determine the speed curve of an animation. Common timing functions include ease, linear, ease-in, ease-out, and ease-in-out.
Browser Prefixes and Compatibility Issues
To ensure animations work across all browsers, developers often need to use vendor prefixes like -webkit-, -moz-, and -o-. These prefixes help maintain compatibility with older browser versions.
Setting Up Animate CSS
Installation Methods
CDN
The simplest way to include Animate CSS in a project is by using a CDN (Content Delivery Network). This method involves linking to the Animate CSS stylesheet hosted on a CDN.
NPM
For developers using Node.js, Animate CSS can be installed via npm (Node Package Manager).
Downloading and Hosting Locally
Alternatively, the Animate CSS files can be downloaded and hosted locally on the server, providing more control over the assets.
Basic Usage
To use Animate CSS, simply add the animate__animated class and the desired animation class to an HTML element. For example:
<div class="animate__animated animate__bounce">Hello, World!</div>
Core Features of Animate CSS
Predefined Animations
Animate CSS includes a wide range of predefined animations categorized into various groups, such as attention seekers, entrances, exits, and specials.
Customization Options
The library allows for extensive customization, enabling developers to adjust the duration, delay, and repetition of animations.
Triggering Animations with JavaScript
Animations can be dynamically triggered using JavaScript, allowing for more interactive and responsive designs.
Animation Duration and Delay
Developers can control the length and start time of animations using the animation-duration and animation-delay properties.
Repeating Animations
The animation-iteration-count property specifies the number of times an animation should repeat. Setting this property to infinite makes the animation loop indefinitely.
Best Practices for Using Animate CSS
To ensure optimal performance and usability, it is essential to follow best practices, such as limiting the number of animations on a page and avoiding animations that may cause motion sickness or accessibility issues.
Predefined Animations
Attention Seekers
Animations like bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, and jello draw attention to an element by making it move or change in a noticeable way.
Back Entrances
Back entrance animations include backInDown, backInLeft, backInRight, and backInUp. These animations make elements appear from a direction, adding a sense of depth and movement.
Back Exits
Back exit animations such as backOutDown, backOutLeft, backOutRight, and backOutUp make elements exit the viewport in a specific direction.
Bouncing Entrances
Bouncing entrance animations like bounceIn, bounceInDown, bounceInLeft, bounceInRight, and bounceInUp give a lively and dynamic appearance as elements enter the viewport.
Bouncing Exits
Bouncing exit animations include bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, and bounceOutUp, making elements bounce as they exit.
Fading Entrances
Fading entrance animations such as fadeIn, fadeInDown, fadeInLeft, fadeInRight, and fadeInUp provide a smooth and subtle way for elements to appear.
Fading Exits
Fading exit animations like fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, and fadeOutUp make elements gradually disappear.
Flippers
Flippers, including flip, flipInX, flipInY, flipOutX, and flipOutY, rotate elements along the X or Y axis, creating a flipping effect.
Lightspeed
Lightspeed animations such as lightSpeedInLeft and lightSpeedOutRight make elements appear and disappear with a fast, sliding motion.
Rotating Entrances
Rotating entrance animations like rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, and rotateInUpRight spin elements into view.
Rotating Exits
Rotating exit animations include rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, and rotateOutUpRight, spinning elements out of view.
Sliding Entrances
Sliding entrance animations such as slideInDown, slideInLeft, slideInRight, and slideInUp slide elements into the viewport from a specific direction.
Sliding Exits
Sliding exit animations like slideOutDown, slideOutLeft, slideOutRight, and slideOutUp slide elements out of the viewport.
Zooming Entrances
Zooming entrance animations include zoomIn, zoomInDown, zoomInLeft, zoomInRight, and zoomInUp, making elements appear
Core Team
 |  |  |
|---|---|---|
| Daniel Eden | Elton Mesquita | Waren Gonzaga |
| Animate.css Creator | Maintainer | Core Contributor |
GitHub Link
GitHub Source Code Link
Animate Style – Link