Javascript required
Skip to content Skip to sidebar Skip to footer
Home / Use Animation Again on Div Css

Use Animation Again on Div Css

Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

Animate.css is a library of fix-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Edit this on GitHub

Installation and Usage

Installing

Install with npm:

            $ npm install animate.css --save

Or install with Yarn (this will simply work with appropriate tooling similar Webpack, Parcel, etc. If you are not using any tool for packing or bundling your lawmaking, you tin simply use the CDN method below):

            $ yarn add animate.css

Import it into your file:

            import 'animate.css';

Or add it straight to your webpage using a CDN:

            <caput>   <link     rel="stylesheet"     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/four.1.i/animate.min.css"   /> </head>

Basic usage

After installing Animate.css, add together the form animate__animated to an element, forth with any of the animation names (don't forget the animate__ prefix!):

            <h1 class="animate__animated animate__bounce">An animated element</h1>

That'southward it! You've got a CSS animated element. Super!

Animations can improve the UX of an interface, but continue in mind that they tin can likewise get in the fashion 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 similar the blithe form to get you upwardly running quickly, you can straight apply the provided animations keyframes. This provides a flexible mode 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 proclamation */   animation-elapsing: 2s; /* don't forget to set a duration! */ }

Exist aware that some animations are dependent on the blitheness-timing property ready on the animation's course. Changing or not declaring it might lead to unexpected results.

CSS Custom Backdrop (CSS Variables)

Since version 4, Animate.css uses custom properties (also known as CSS variables) to ascertain the animation'south duration, delay, and iterations. This makes Animate.css very flexible and customizable. Demand to change an animation elapsing? Only prepare a new value globally or locally.

Example:

            /* This only changes this particular blitheness duration */ .animate__animated.animate__bounce {   --breathing-elapsing: 2s; }  /* This changes all the animations globally */ :root {   --animate-elapsing: 800ms;   --animate-delay: 0.9s; }

Custom properties also arrive like shooting fish in a barrel to modify all your animation'due south time-constrained properties on the fly. It means that you tin can have a irksome-movement or fourth dimension-lapse effect with a javascript one-liner:

            // All animations volition take twice the time to accomplish certificate.documentElement.style.setProperty('--animate-duration', '2s');  // All animations will take one-half the time to accomplish document.documentElement.style.setProperty('--animate-duration', '.5s');

Even though some aging browsers do not back up custom properties, Breathing.css provides a proper fallback, widening its support for any browser that supports CSS animations.

Edit this on GitHub

Utility Classes

Animate.css comes packed with a few utility classes to simplify its use.

Delay classes

Y'all can add delays direct on the element'due south course attribute, just like this:

            <div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css provides the following delays:

Class name Default delay time
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s

The provided delays are from i to 5 seconds. You lot can customize them setting the --breathing-filibuster property to a longer or a shorter duration:

            /* All filibuster classes will take 2x longer to kickoff */ :root {   --animate-delay: 2s; }  /* All filibuster classes will accept half the time to start */ :root {   --animate-delay: 0.5s; }

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

            <div course="animate__animated animate__bounce animate__faster">Example</div>
Class proper noun Default speed time
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

The animate__animated class has a default speed of 1s. Y'all can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Case:

            /* All animations will have twice as long to finish */ :root {   --animate-duration: 2s; }  /* But this element volition have half the time to stop */ .my-chemical element {   --animate-elapsing: 0.5s; }

Detect that some animations have a duration of less than 1 2d. 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 reply to that change!

Repeating classes

You tin control the iteration count of the blitheness by adding these classes, like beneath:

            <div class="animate__animated animate__bounce animate__repeat-2">Example</div>
Class Name Default iteration count
animate__repeat-1 ane
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite

As with the delay and speed classes, the animate__repeat course is based on the --animate-repeat property and has a default iteration count of i. You tin can customize them by setting the --animate-repeat belongings to a longer or a shorter value:

            /* The element volition echo the animation 2x    It's better to set this property locally and non globally or    you might stop up with a messy state of affairs */ .my-element {   --animate-repeat: 2; }

Notice that animate__infinite doesn't employ any custom belongings, and changes to --breathing-repeat will have no effect. Don't forget to read the best practices department to make the best use of repeating animations.

Edit this on GitHub

Best Practices

Animations tin can greatly meliorate an interface'due south UX, only information technology's important to follow some guidelines to non overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a adept starting time.

Meaningful animations

You should avoid animating an element just for the sake of information technology. Keep in mind that animations should make an intention articulate. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user'southward attending to something special in your interface and non merely 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 land.

It doesn't mean that you lot should avert adding playfulness to the interface, merely exist sure that the animations are not getting in the way of your user and that the folio's functioning is non affected past an exaggerated utilise of animations.

Don't animate large elements

Avoid information technology as it won't bring much value to the user and will probably just cause defoliation. Besides that, there is a skilful 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. In that location were some reports pointing out that this could trigger some weird browser bugs. Too, making the whole page bounce would hardly provide good value to your UX. If you lot indeed demand this sort of result, wrap your page in an element and animate it, like this:

            <trunk>   <principal class="animate__animated animate__fadeInLeft">     <!-- Your code -->   </chief> </torso>

Infinite animations should be avoided

Even though Animate.css provides utility classes for repeating animations, including an space ane, you should avert endless animations. It will only distract your users and might annoy a skilful slice of them. Then, use information technology wisely!

Mind the initial and final land of your elements

All the Animate.css animations include a CSS property chosen blitheness-fill-mode, which controls the states of an element before and later on animation. You lot tin read more about information technology here. Animate.css defaults to animation-fill up-mode: both, but you can change information technology to conform your needs.

Don't disable the prefers-reduced-move media query

Since version 3.vii.0 Animate.css supports the prefers-reduced-move media query which disables animations based on the OS system'due south preference on supporting browsers (about electric current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to assistance people with vestibular and seizure disorders. You can read more most it here. If your web-thing needs the animations to part, warn users, only don't disable the characteristic. Y'all tin can practice information technology easily with CSS only. Here'due south a elementary example:

See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.

Gotchas

You lot can't animate inline elements

Even though some browsers tin can animate inline elements, this goes against the CSS animation specs and will intermission on some browsers or eventually terminate to work. Always breathing block or inline-cake level elements (filigree and flex containers and children are block-level elements also). You can gear up an element to display: inline-block when animating an inline-level element.

Overflow

Near of the Animate.css animations will movement elements beyond the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden belongings. At that place'due south no recipe to when and where to use it, but the bones thought is to utilize it in the parent property the animated element. It'due south up to you to effigy 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 accept to use Javascript to achieve this result.

Edit this on GitHub

Usage with Javascript

Y'all tin can do a whole agglomeration of other stuff with animate.css when y'all combine it with Javascript. A simple example:

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

You can detect when an animation ends:

            const chemical element = document.querySelector('.my-chemical element'); element.classList.add('animate__animated', 'animate__bounceOutLeft');  element.addEventListener('animationend', () => {   // practice something });

or change its duration:

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

You tin can also use a simple function to add the animations classes and remove them automatically:

            const animateCSS = (element, animation, prefix = 'animate__') =>   // We create a Promise and render it   new Promise((resolve, reject) => {     const animationName = `${prefix}${animation}`;     const node = document.querySelector(element);      node.classList.add(`${prefix}animated`, animationName);      // When the blitheness ends, we make clean the classes and resolve the Promise     function handleAnimationEnd(event) {       event.stopPropagation();       node.classList.remove(`${prefix}animated`, animationName);       resolve('Blitheness ended');     }      node.addEventListener('animationend', handleAnimationEnd, {in one case: true});   });

And use it like this:

            animateCSS('.my-element', 'bounce');  // or animateCSS('.my-element', 'bounciness').and so((message) => {   // Do something after the animation });

If y'all had a hard fourth dimension understanding the previous function, accept a expect at const, classList, pointer functions, and Promises.

Edit this on GitHub

Migration from v3.x and Under

Animate.css v4 brought some improvements, improved animations, and new animations, which makes information technology worth upgrading. Even so, it as well comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is impossible.

Merely fear non! Although the default build, animate.min.css, brings the animate__ prefix we too provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.ten and under).

If you're using a bundler, update your import:

from:

            import 'animate.min.css';

to

            import 'breathing.compat.css';

Notice that depending on your project's configuration, this might change a chip.

In case of using a CDN, update the link in your HTML:

from:

            <head>   <link     rel="stylesheet"     href="https://cdnjs.cloudflare.com/ajax/libs/breathing.css/iii.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>

In the case of a new project, it's highly recommended to utilise the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in subsequently versions, we might make up one's mind to discontinue the breathing.compat.css file.

Edit this on GitHub

Custom Builds

Custom builds are non possible from a node_modules folder as we don't ship the building tools in the npm module.

Animate.css is powered by npm, postcss + postcss-preset-env, which means you tin can create custom builds pretty easily, using future CSS with proper fallbacks.

First of all, you'll need Node and all other dependencies:

            $ git clone https://github.com/animate-css/breathing.css.git $ cd animate.css $ npm install

Adjacent, run npm starting time to compile your custom build. Three files will be generated:

  • animate.css: raw build, piece of cake to read and without whatsoever optimization
  • animate.min.css: minified build ready for production
  • breathing.compat.css: minified build gear up for production without class prefix. This should only be used equally an easy path for migrations.

For example, if you'll but use some of the "attention seekers" animations, only edit the ./source/breathing.css file, delete every @import and the ones you want to use.

            @import 'attention_seekers/bounciness.css'; @import 'attention_seekers/flash.css'; @import 'attention_seekers/pulse.css'; @import 'attention_seekers/elastic.css'; @import 'attention_seekers/shake.css'; @import 'attention_seekers/headShake.css'; @import 'attention_seekers/swing.css'; @import 'attention_seekers/tada.css'; @import 'attention_seekers/wobble.css'; @import 'attention_seekers/jello.css'; @import 'attention_seekers/heartBeat.css';

Now, just run npm kickoff and your highly optimized build will be generated at the root of the projection.

Changing the default prefix

It'southward pretty straight forwards to change animate'southward prefix on your custom build. Change the animateConfig's prefix holding in the package.json file and rebuild the library with npm start:

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

and so:

            $ npm start

Easy peasy!

Edit this on GitHub

Accessibility

Animate.css supports the 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 organisation preferences, and it will turn off CSS transitions for them without any further work required.

Edit this on GitHub

Core Team
Daniel Eden Elton Mesquita Waren Gonzaga
Breathing.css Creator Maintainer Core Correspondent

Edit this on GitHub

License and Contributing

Breathing.css is licensed under the Hippocratic License.

Contributing

Pull requests are the style to go hither. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and let united states of america see a demo of submitted animations in a pen. That concluding one is important.

Code of Conduct

This project and everyone participating in information technology is governed by the Contributor Covenant Code of Comport. Past participating, you are expected to uphold this code. Please report unacceptable beliefs to animate@eltonmesquita.com.

Edit this on GitHub

Use Animation Again on Div Css

Source: https://animate.style/