How To Animate With Delay Animate Css
Breathing.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.ten and under.
Animate.css is a library of prepare-to-utilize, cross-browser animations for use in your web projects. Groovy 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 only work with advisable tooling like Webpack, Parcel, etc. If yous are not using whatever tool for packing or bundling your code, y'all tin simply apply the CDN method below):
$ yarn add animate.css Import it into your file:
import 'animate.css'; Or add together information technology directly to your webpage using a CDN:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/breathing.css/4.1.1/animate.min.css" /> </head> Basic usage
Later installing Breathing.css, add the course animate__animated to an element, along with whatever of the animation names (don't forget the animate__ prefix!):
<h1 class="animate__animated animate__bounce">An animated element</h1> That's it! Yous've got a CSS animated element. Super!
Animations can improve the UX of an interface, but keep in heed 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 all-time way possible.
Using @keyframes
Even though the library provides you a few helper classes like the animated class to get you upwardly running quickly, you lot can directly use the provided animations keyframes. This provides a flexible mode to employ Animate.css with your electric current projects without having to refactor your HTML lawmaking.
Example:
.my-chemical element { display: inline-block; margin: 0 0.5rem; blitheness: bounce; /* referring directly to the animation'south @keyframe proclamation */ animation-elapsing: 2s; /* don't forget to set a duration! */ } Be aware that some animations are dependent on the animation-timing holding attack 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'southward duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to alter an animation duration? Just fix a new value globally or locally.
Example:
/* This simply changes this item animation duration */ .animate__animated.animate__bounce { --animate-duration: 2s; } /* This changes all the animations globally */ :root { --animate-elapsing: 800ms; --breathing-delay: 0.9s; } Custom properties likewise make it easy to change all your blitheness'south 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-elapsing', '2s'); // All animations will have half the fourth dimension to accomplish certificate.documentElement.style.setProperty('--animate-duration', '.5s'); Even though some crumbling browsers do non support custom properties, Animate.css provides a proper fallback, widening its support for whatsoever browser that supports CSS animations.
Edit this on GitHub
Utility Classes
Animate.css comes packed with a few utility classes to simplify its utilise.
Delay classes
You lot tin add delays directly on the element's course attribute, just like this:
<div class="animate__animated animate__bounce animate__delay-2s">Case</div> Breathing.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 ane to 5 seconds. Y'all tin customize them setting the --animate-delay property to a longer or a shorter duration:
/* All filibuster classes will have 2x longer to start */ :root { --animate-delay: 2s; } /* All delay classes will take half the fourth dimension to start */ :root { --animate-filibuster: 0.5s; } Slow, slower, fast, and Faster classes
You tin command the speed of the animation by adding these classes, as below:
<div class="animate__animated animate__bounce animate__faster">Example</div> | Class proper name | 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 too customize the animations duration through the --breathing-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 { --breathing-duration: 2s; } /* Only this chemical element will take half the time to end */ .my-element { --animate-elapsing: 0.5s; } Notice that some animations accept a duration of less than 1 2d. As we used the CSS calc() function, setting the duration through the --animation-duration property volition respect these ratios. So, when you change the global duration, all the animations will respond to that change!
Repeating classes
Yous tin control the iteration count of the animation by calculation these classes, similar below:
<div class="animate__animated animate__bounce animate__repeat-ii">Case</div> | Class Name | Default iteration count |
|---|---|
animate__repeat-1 | one |
animate__repeat-2 | 2 |
animate__repeat-3 | iii |
animate__infinite | space |
Equally with the delay and speed classes, the animate__repeat class is based on the --breathing-repeat property and has a default iteration count of one. You lot can customize them by setting the --animate-repeat property to a longer or a shorter value:
/* The element volition repeat the blitheness 2x Information technology's improve to gear up this property locally and not globally or you might end up with a messy situation */ .my-chemical element { --animate-echo: 2; } Discover that animate__infinite doesn't use any custom property, and changes to --breathing-repeat will have no issue. Don't forget to read the all-time practices section to brand the best use of repeating animations.
Edit this on GitHub
All-time Practices
Animations tin can greatly better an interface's UX, but it's of import 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
Yous should avoid animating an chemical element just for the sake of it. Proceed in listen that animations should make an intention articulate. 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 leave animations should be used to orientate what is happening in the interface, conspicuously signaling that it'due south 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 operation is non affected past an exaggerated use of animations.
Don't animate big elements
Avoid it as it won't bring much value to the user and will probably merely crusade defoliation. Besides that, there is a good risk that the animations will be junky, culminating in bad UX.
Don't breathing root elements
Animating the <html/> or <body/> tags is possible, just you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole folio bounce would hardly provide proficient value to your UX. If you indeed demand this sort of effect, wrap your page in an element and animate it, like this:
<body> <main class="animate__animated animate__fadeInLeft"> <!-- Your code --> </master> </body> Infinite animations should be avoided
Even though Breathing.css provides utility classes for repeating animations, including an infinite one, you should avert countless animations. Information technology will just distract your users and might annoy a good slice of them. And so, use information technology wisely!
Mind the initial and terminal land of your elements
All the Animate.css animations include a CSS property chosen animation-fill-mode, which controls the states of an element earlier and after blitheness. Y'all can read more about it here. Animate.css defaults to animation-fill-mode: both, just you can change it to suit your needs.
Don't disable the prefers-reduced-motion media query
Since version three.7.0 Animate.css supports the prefers-reduced-motility media query which disables animations based on the Os arrangement'southward preference on supporting browsers (near electric current browsers back up 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. Yous tin can read more about it here. If your spider web-matter needs the animations to function, warn users, but don't disable the feature. Y'all tin can do it easily with CSS only. Hither's a unproblematic case:
See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.
Gotchas
You tin't animate inline elements
Even though some browsers can breathing inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always breathing block or inline-block level elements (filigree and flex containers and children are block-level elements too). You can set an chemical element to display: inline-cake when animating an inline-level element.
Overflow
Most of the Animate.css animations volition move elements beyond the screen and might create scrollbars on your web-thing. This is manageable using the overflow: subconscious belongings. In that location'south no recipe to when and where to utilise it, but the bones idea is to use it in the parent property the blithe element. It's upward to you to effigy out when and how to use it, this guide can aid you empathise it.
Intervals betwixt repeats
Unfortunately, this isn't possible with pure CSS correct now. You have to utilise Javascript to attain this result.
Edit this on GitHub
Usage with Javascript
Yous can do a whole bunch of other stuff with animate.css when y'all combine it with Javascript. A simple example:
const element = document.querySelector('.my-chemical element'); element.classList.add('animate__animated', 'animate__bounceOutLeft'); You tin can detect when an animation ends:
const element = certificate.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft'); element.addEventListener('animationend', () => { // exercise something }); or change its elapsing:
const chemical element = document.querySelector('.my-element'); element.style.setProperty('--animate-duration', '0.5s'); Y'all tin can also employ a simple function to add the animations classes and remove them automatically:
const animateCSS = (element, animation, prefix = 'animate__') => // Nosotros create a Promise and return it new Promise((resolve, reject) => { const animationName = `${prefix}${blitheness}`; const node = document.querySelector(element); node.classList.add together(`${prefix}animated`, animationName); // When the animation ends, we clean the classes and resolve the Promise function handleAnimationEnd(event) { issue.stopPropagation(); node.classList.remove(`${prefix}blithe`, animationName); resolve('Blitheness ended'); } node.addEventListener('animationend', handleAnimationEnd, {once: true}); }); And apply it like this:
animateCSS('.my-element', 'bounce'); // or animateCSS('.my-element', 'bounce').and so((message) => { // Do something afterwards the animation }); If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.
Edit this on GitHub
Migration from v3.ten and Under
Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking alter: we accept added a prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is incommunicable.
Merely fearfulness not! Although the default build, animate.min.css, brings the animate__ prefix nosotros also provide the animate.compat.css file which brings no prefix at all, like the previous versions (three.x and nether).
If you're using a bundler, update your import:
from:
import 'animate.min.css'; to
import 'breathing.compat.css'; Notice that depending on your projection's configuration, this might change a fleck.
In case of using a CDN, update the link in your HTML:
from:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/three.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'south highly recommended to use the default prefixed version as information technology'll brand sure that you'll hardly have classes alien with your project. Besides, in afterwards versions, we might decide to discontinue the breathing.compat.css file.
Edit this on GitHub
Custom Builds
Custom builds are not possible from a node_modules folder equally nosotros don't ship the edifice tools in the npm module.
Animate.css is powered by npm, postcss + postcss-preset-env, which means you lot can create custom builds pretty hands, using future CSS with proper fallbacks.
Showtime 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 Next, run npm start to compile your custom build. Iii files will be generated:
-
animate.css: raw build, easy to read and without whatsoever optimization -
breathing.min.css: minified build ready for production -
animate.compat.css: minified build fix for production without form prefix. This should only be used as an easy path for migrations.
For example, if you'll only utilise some of the "attention seekers" animations, simply edit the ./source/animate.css file, delete every @import and the ones you want to use.
@import 'attention_seekers/bounce.css'; @import 'attention_seekers/flash.css'; @import 'attention_seekers/pulse.css'; @import 'attention_seekers/rubberBand.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 start and your highly optimized build will exist generated at the root of the projection.
Changing the default prefix
It's pretty straight forward to change animate's prefix on your custom build. Modify the animateConfig's prefix property in the parcel.json file and rebuild the library with npm showtime:
/* on Breathing.css package.json */ "animateConfig": { "prefix": "myCustomPrefix__" }, and so:
$ npm starting time Piece of cake 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 Bone, including mobile), users can select "reduce move" on their operating arrangement preferences, and it volition turn off CSS transitions for them without whatsoever further work required.
Edit this on GitHub
Core Team
 |  |  |
|---|---|---|
| Daniel Eden | Elton Mesquita | Waren Gonzaga |
| Animate.css Creator | Maintainer | Core Correspondent |
Edit this on GitHub
License and Contributing
Animate.css is licensed under the Hippocratic License.
Contributing
Pull requests are the mode to go hither. We but have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and permit united states of america run into a demo of submitted animations in a pen. That last i is of import.
Code of Comport
This project and everyone participating in information technology is governed by the Contributor Covenant Code of Conduct. By participating, y'all are expected to uphold this code. Please report unacceptable beliefs to animate@eltonmesquita.com.
Edit this on GitHub
Source: https://animate.style/
Posted by: denneysoperypear.blogspot.com
0 Response to "How To Animate With Delay Animate Css"
Post a Comment