CSS Animation Delay

A collection of pre-made cross-browser animations called Animate.css is available for use in your online applications. It is excellent for attention-grabbing cues, sliders, home pages, and emphasis.

Installation and Usage

Using npm for installation:

Alternatively, install using Yarn (this requires the right tools, such as Webpack, Parcel, etc.). You can use the CDN approach below if you are not using any tools to bundle or pack your code:

Import it into your file:

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>

A negative animation-delay number is another option. Like "0s," a negative value indicates that the animation will begin playing immediately upon application, but it will also automatically advance by the delay's absolute value.

This gives the impression that the animation has already begun partially because it began at the designated time in the past. If you set the animation-delay value to, say, "-2s," the animation will begin instantly when it is applied, but it will look to have started two seconds earlier.

Basic Usage

Once Animate.css is installed, apply any of the animation names to an element and the class animate__animated (do not forget the animate__ prefix!):

And that's it! A CSS animation element is present. Fantastic!

// Although animations can enhance an interface's user experience, be aware that they can also impede users' progress! To ensure that your online projects go as smoothly as possible, please read the sections on best practices and gotchas.

Using @keyframes

You may use the animation keyframes that the library supplies directly, even though it offers a few convenience classes, such as the animated class, to get you started quickly. This gives you an adaptable method to include Animate.css in your ongoing projects without requiring you to modify 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; /* do not forget to set a duration! */ 
}

NOTE: The animation-timing attribute specified on the animation's class affects some animations. Modifying it or not revealing it might have unanticipated consequences.

CSS Custom Properties (CSS Variables)

Since version 4, the length, delay, and iterations of the animation are defined using custom properties, commonly referred to as CSS variables, in Animate.css. Hence, Animate.css is incredibly adaptable and customizable. Do you need to alter the animation's duration? Change the value locally or globally.

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; 
}

Moreover, custom properties make it simple to make instantaneous changes to all the time-constrained properties in your animation. It indicates that a one-liner in javascript may produce a slow-motion or time-lapse effect:

// It will take twice as long to complete every animation document.documentElement.style.setProperty('2s', '--animate-duration');
// It will take half as long to complete all animations document.documentElement.style.set'--animate-duration', '.5s', property;

Animate.css offers a suitable fallback, extending its compatibility for every browser that supports CSS animations, even if certain outdated browsers do not support special properties.

Utility Classes

A few utility classes are included with CSS to make it easier to use.

Delay Classes

Delays can be added directly to an element's class property in the manner described below:

Animate.css provides the following delays:

Name of class & The delay time by default is animate__delay-2s~2s, animate__delay-3s~3s, animate__delay-4s~4s, and animate__delay-5s~5s.

There are delays ranging from one to five seconds. By changing the length of the --animate-delay attribute, you may personalize them:

** The start time of all delay classes will be doubled. 
:root { 
--animate-delay: 2s; 
}
/* The start time of all delay classes will be halved */ 
:root { 
--animate-delay: 0.5s; 
}

Slow, Slower, Fast, and Faster Classes

By adding the following classes, you may adjust the animation's speed:

Class name & Default speed time animate__slow 2s animate__slower 3s animate__fast 800ms animate__faster 500ms

The speed of the animate__animated class is set to 1s by default. The --animate-length parameter allows you to change the animation's duration both locally and globally. This will impact both the utility classes and the animations. For instance:

/* All animations will take twice as long to finish */ 
:root { 
--animate-duration: 2s; 
}
*/ My element {
 --animate-duration: 0.5s; 
}

You will see that some animations last for a fraction of a second. These ratios will be respected when the duration is specified using the --animation-duration property, as we did with the CSS calc() method. Thus, all of the animations will react to a change in the global duration!

Repeating Classes

By adding the following classes, you may adjust the animation's iteration count:

Class Name & Default iteration count animate__repeat-1 1 animate__repeat-2 2 animate__repeat-3 3 animate__infinite infinite

The animate__repeat class, like the delay and speed classes, has a default iteration count of 1 and is based on the --animate-repeat parameter. By adjusting the --animate-repeat parameter to a different value, you may modify them:

// The element is going to repeat the animation twice.

// Ideally, you should set this property locally rather than globally to avoid a complicated scenario */

.my-element { 
--animate-repeat: 2; 
}

Animate__infinite does not utilize any custom properties, so modifications made to --animate-repeat will not impact the result. To get the most out of repeated animations, remember to read the best practices section.

Best Practices

Animations may substantially enhance an interface's user experience (UX), but it's crucial to adhere to certain rules to stay moderate and make your online products less user-friendly. The guidelines listed below ought to give you a head start.

1. Meaningful animations

An element should not be animated only for show. Remember that animations ought to provide a clear message. Attention seekers, such as bounce, flash, pulse, and others, should be used to highlight a particular feature of your interface rather than just adding "flashiness" to it.

Animations for entries and exits should be employed to help users navigate the interface and identify when it is changing into a new state.

It does not imply that you should refrain from incorporating some humor into the UI; rather, make sure that the animations do not impede the user's experience or negatively impact the page's performance when used excessively.

2. Don't animate large elements

Steers clear of it as it will likely merely confuse the customer and offer no benefit. In addition, the likelihood of the animations being shoddy and producing a poor user experience is high.

3. Don't animate root elements

Although it is conceivable, you should refrain from animating the or tags. There have been reports indicating that this may cause some strange browser issues. Moreover, bouncing the entire page would hardly improve user experience. If you really want this kind of effect, use an element, and animate it on your website, as in this example:

4. Infinite animations should be avoided

You should steer clear of limitless animations even if Animate.css offers utility classes for recurrent animations, one of which is infinite. It will just distract your users, and some may become irritated. Thus, use caution when using it!

5. Mind the initial and final state of your elements

The animation-fill-mode CSS property regulates an element's pre- and post-animation states. It is included in all Animate.css animations. You can read more about it here. You may modify animation-fill-mode: both in Animate.css to suit your needs, but that is the default.

6. Don't turn off the prefers-reduced-motion media query.

Animate.css has supported the prefers-reduced-motion media query since version 3.7.0. This query turns off animations based on the choice of the operating system on compatible browsers (many modern browsers support it). This essential accessibility function must never be turned off! Browsers have this feature built in to assist users who suffer from vestibular and seizure problems. Read more about it by going here. Give users notice if your online application requires animations to work, but do not turn off the functionality. With just CSS, it is simple to accomplish. Here is an easy illustration:

Gotchas

1. You can't animate inline elements.

Although inline components can animate in some browsers, this violates the CSS animation specifications, breaks in some browsers, and eventually stops working. Block or inline-block-level components should always be animated (children, flex containers, and grids are also block-level elements). When animating an inline-level element, you have the option to set an element to display: inline-block.

2. Overflow

Animate.css animations, for the most part, move objects across the screen and may even add scrollbars to your website. This is controllable using the overflow: hidden property. The general concept is to utilize it in the parent containing the animated element; there is no set rule for when and where to apply it. It would help if you determined when and how to utilize it; this guide will assist you in doing so.

3. Intervals between repeats

Sadly, pure CSS cannot accomplish this at this time. Javascript must be used.

4. Usage with Javascript

When combined with Javascript, animate.css may be used for a plethora of additional tasks. An easy illustration would be:

element.classList.add('animate__animated', 'animate__bounceOutLeft'); const element = document.querySelector('.my-element');

When an animation finishes, it can be detected:

element.classList.add('animate__animated', 'animate__bounceOutLeft'); const element = document.querySelector('.my-element');
element.addEventListener('animationend', () => { // do something }); or change its duration:

or change its duration:

element.style.setProperty('--animate-duration', '0.5s'); const element = document.querySelector('.my-element');

To automatically add and delete the animation classes, you can alternatively use the following straightforward function:

const animateCSS = (element, animation, prefix = 'animate__') =>
  // 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 the preceding function needs help to grasp, consider looking at const, classList, arrow functions, and promises.

Migration from v3.x and Under

Upgrading is worthwhile since the transition from v3.x to UnderAnimate.css v4 brings some enhancements, including new and better animations. It also includes a breaking change: all Animate.css classes now include a prefix (animate__ by default), making a direct migration unfeasible.

We offer the animate.compat.css file, which adds no prefix at all, much as the earlier versions (3.x and down), even if the default build, animate.min.css, brings the animate__ prefix.

Update your import if you are using a bundler:

From:

Note that this may vary slightly based on the setup of your project.

If you're utilizing a CDN, make sure to update your HTML link.

From:
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>
To
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

It is strongly advised that you use the default prefixed version for new projects, as it will ensure that very few classes clash with your work. Furthermore, we may choose to remove the animate.compat.css file in later releases.

Modifying the Prefix By Default

Changing the prefix of animation on your custom build is rather simple. Modify the package's animateConfig's prefix property.json file and use npm start to construct the library:

"animateConfig": {"prefix": "myCustomPrefix__"}, then: /* on Animate.css package.json */
$ npm start 

Accessibility

Users who are sensitive to motion can choose not to see animations by using the prefers-reduced-motion media query, which Animate.css supports. Users may also choose "reduce motion" in their operating system options to turn off CSS transitions automatically on compatible systems (currently, all major browsers and OS, including mobile).

Next TopicCSS Cheat Sheet

← prev next →