Meta tags:
description=Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.;

Headings (most frequently used words):

entrances, exits, and, animate, css, classes, elements, animations, usage, don, the, custom, contributing, back, bouncing, fading, rotating, zooming, sliding, of, just, add, water, documentation, installation, utility, best, practices, gotchas, with, javascript, migration, from, v3, under, builds, accessibility, core, team, license, attention, seekers, flippers, lightspeed, specials, installing, basic, delay, slow, slower, fast, faster, repeating, meaningful, large, root, infinite, should, be, avoided, mind, initial, final, state, your, disable, prefers, reduced, motion, media, query, you, can, inline, overflow, intervals, between, repeats, changing, default, prefix, code, conduct, using, keyframes, properties, variables,

Text of the page (most frequently used words):
the (112), class (112), name (100), copy (97), clipboard (97), css (74), animate (72), and (48), you (44), animations (39), this (35), element (29), your (28), can (28), #animation (24), that (21), use (20), with (20), will (20), duration (20), import (17), classes (17), all (14), for (13), prefix (13), edit (11), github (11), property (11), attention_seekers (11), some (11), should (11), change (10), custom (10), not (10), animate__animated (10), delay (10), have (9), only (9), npm (9), example (9), time (9), add (9), motion (8), are (8), default (8), don (8), like (8), elements (8), browsers (7), start (7), build (7), just (7), bounce (7), using (7), from (7), but (7), also (7), const (7), when (7), entrances (7), read (6), file (6), code (6), way (6), any (6), root (6), might (6), head (6), document (6), animated (6), inline (6), div (6), take (6), exits (6), here (5), prefers (5), media (5), library (5), project (5), com (5), users (5), them (5), attention (5), compat (5), min (5), node (5), which (5), new (5), function (5), classlist (5), web (5), block (5), set (5), provides (5), avoid (5), interface (5), best (5), repeat (5), animate__repeat (5), animate__bounce (5), animate__delay (5), properties (5), supports (4), reduced (4), under (4), without (4), query (4), easy (4), used (4), https (4), install (4), possible (4), make (4), link (4), animate__ (4), queryselector (4), javascript (4), even (4), though (4), utility (4), good (4), browser (4), value (4), bring (4), user (4), changes (4), globally (4), speed (4), directly (4), more (3), about (3), feature (3), license (3), please (3), etc (3), see (3), one (3), out (3), work (3), flash (3), pulse (3), seekers (3), ready (3), need (3), create (3), builds (3), version (3), besides (3), rel (3), stylesheet (3), href (3), cdnjs (3), cloudflare (3), ajax (3), libs (3), cdn (3), html (3), notice (3), provide (3), migration (3), animatecss (3), something (3), after (3), promise (3), resolve (3), animationname (3), simple (3), style (3), setproperty (3), its (3), usage (3), thing (3), there (3), level (3), animating (3), support (3), into (3), mind (3), repeating (3), infinite (3), body (3), page (3), effect (3), adding (3), following (3), practices (3), forget (3), locally (3), iteration (3), count (3), customize (3), setting (3), longer (3), these (3), below (3), half (3), delays (3), disabled (2), off (2), hippocratic (2), licensed (2), participating (2), eltonmesquita (2), contributor (2), conduct (2), pull (2), rules (2), important (2), pen (2), contributing (2), core (2), elton (2), mesquita (2), daniel (2), eden (2), including (2), reduce (2), system (2), accessibility (2), then (2), package (2), json (2), animateconfig (2), pretty (2), changing (2), now (2), run (2), highly (2), generated (2), rubberband (2), headshake (2), swing (2), tada (2), wobble (2), jello (2), heartbeat (2), simply (2), minified (2), production (2), git (2), other (2), postcss (2), means (2), easily (2), proper (2), case (2), sure (2), hardly (2), versions (2), update (2), brings (2), previous (2), brought (2), makes (2), comes (2), breaking (2), ends (2), handleanimationend (2), event (2), remove (2), addeventlistener (2), animationend (2), animate__bounceoutleft (2), whole (2), most (2), basic (2), help (2), guide (2), overflow (2), display (2), gotchas (2), since (2), based (2), current (2), needs (2), disable (2), before (2), fill (2), mode (2), both (2), state (2), main (2), doesn (2), keep (2), improve (2), things (2), animate__infinite (2), has (2), shorter (2), control (2), through (2), twice (2), finish (2), animate__faster (2), 800ms (2), slow (2), provided (2), few (2), accomplish (2), documentelement (2), variables (2), flexible (2), get (2), projects (2), keyframes (2), installing (2), yarn (2), cross (2), sliding (2), zooming (2), rotating (2), fading (2), bouncing (2), back (2), seems, turning, hey, freely, respecting, terms, included, everyone, governed, expected, uphold, report, unacceptable, behavior, covenant, requests, two, submitting, request, match, naming, convention, camelcase, categorized, fades, bounces, let, demo, submitted, last, maintainer, creator, waren, gonzaga, team, sensitivity, opt, supported, platforms, currently, major, mobile, select, their, operating, preferences, turn, transitions, further, required, peasy, mycustomprefix__, straight, forward, rebuild, optimized, shake, delete, every, ones, want, source, path, migrations, raw, optimization, next, compile, three, files, clone, first, dependencies, powered, preset, env, future, fallbacks, node_modules, folder, ship, building, tools, module, recommended, prefixed, conflicting, later, decide, discontinue, depending, configuration, bit, bundler, fear, although, improvements, improved, worth, upgrading, however, added, defaulting, direct, impossible, had, hard, understanding, look, promises, arrow, functions, message, return, reject, clean, stoppropagation, ended, once, true, automatically, detect, bunch, stuff, combine, unfortunately, isn, pure, right, achieve, result, intervals, between, repeats, move, across, screen, scrollbars, manageable, recipe, where, idea, parent, holding, figure, how, understand, hidden, goes, against, specs, break, eventually, cease, always, grid, flex, containers, children, too, codepen, disables, preference, supporting, never, built, people, vestibular, seizure, disorders, warn, critical, include, called, controls, states, defaults, suit, initial, final, endless, distract, annoy, slice, wisely, avoided, animate__fadeinleft, tags, were, reports, pointing, could, trigger, weird, bugs, making, would, indeed, sort, wrap, won, much, probably, cause, confusion, chance, junky, culminating, bad, large, mean, playfulness, getting, performance, affected, exaggerated, exit, orientate, what, happening, clearly, signaling, transitioning, sake, intention, clear, special, flashiness, meaningful, greatly, follow, guidelines, overdo, deteriorate, experience, section, better, end, messy, situation, less, than, second, respect, ratios, global, respond, calc, long, affect, 500ms, animate__fast, animate__slower, animate__slow, slower, fast, faster, seconds, attribute, packed, simplify, aging, fallback, widening, constrained, fly, lapse, liner, particular, uses, known, define, iterations, very, customizable, aware, dependent, declaring, lead, unexpected, results, timing, margin, 5rem, referring, keyframe, declaration, helper, running, quickly, having, refactor, they, sections, life, got, super, along, names, webpage, appropriate, tooling, webpack, parcel, tool, packing, bundling, method, save, installation, great, emphasis, home, pages, sliders, guiding, hints, refer, updating, documentation, another, friends, slideoutup, slideoutright, slideoutleft, slideoutdown, slideinup, slideinright, slideinleft, slideindown, zoomoutup, zoomoutright, zoomoutleft, zoomoutdown, zoomout, zoominup, zoominright, zoominleft, zoomindown, zoomin, rollout, rollin, jackinthebox, hinge, specials, rotateoutupright, rotateoutupleft, rotateoutdownright, rotateoutdownleft, rotateout, rotateinupright, rotateinupleft, rotateindownright, rotateindownleft, rotatein, lightspeedoutleft, lightspeedoutright, lightspeedinleft, lightspeedinright, lightspeed, flipouty, flipoutx, flipiny, flipinx, flip, flippers, fadeoutbottomleft, fadeoutbottomright, fadeouttopright, fadeouttopleft, fadeoutupbig, fadeoutup, fadeoutrightbig, fadeoutright, fadeoutleftbig, fadeoutleft, fadeoutdownbig, fadeoutdown, fadeout, fadeinbottomright, fadeinbottomleft, fadeintopright, fadeintopleft, fadeinupbig, fadeinup, fadeinrightbig, fadeinright, fadeinleftbig, fadeinleft, fadeindownbig, fadeindown, fadein, bounceoutup, bounceoutright, bounceoutleft, bounceoutdown, bounceout, bounceinup, bounceinright, bounceinleft, bounceindown, bouncein, backoutup, backoutright, backoutleft, backoutdown, backinup, backinright, backinleft, backindown, shakey, shakex, close, list, water,

Text of the page (random words):
e 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 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 edit this on github utility classes animate css comes packed with a few utility classes to simplify its use delay classes you can add delays directly on the element s class 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 1 to 5 seconds you can customize them setting the animate delay property to a longer or a shorter duration all delay classes will take 2x longer to start root animate delay 2s all delay classes will take 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 class animate__animated animate__bounce animate__faster example div class 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 you can also customize the animations duration through the animate 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 animate duration 2s only this element will take half the time to finish my element animate duration 0 5s 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 class name default iteration count animate__repeat 1 1 animate__repeat 2 2 animate__repeat 3 3 animate__infinite infinite as with the delay and speed classes the animate__repeat class is based on the animate repeat property and has a default iteration count of 1 you can customize them by setting the animate repeat property to a longer or a shorter value the element will repeat the animation 2x it s better to set this property locally and not globally or you might end up with a messy situation my element animate repeat 2 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 edit this on github best practices animations can greatly improve an interface s ux but it s important 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 you should avoid animating an element just for the sake of it keep in mind that animations should make an intention clear 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 exit animations should be used to orientate what is happening in the interface clearly signaling that it s 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 performance is not affected by an exaggerated use of animations don t animate large elements avoid it as it won t bring much value to the user and will probably only cause confusion besides that there is a good 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 there were some reports pointing out that this could trigger some weird browser bugs besides making the whole page bounce would hardly provide good value to your ux if you indeed need this sort of effect wrap your page in an element and animate it like this body main class animate__animated animate__fadeinleft your code main body 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 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 see the pen prefers reduce motion media query by elton mesquita eltonmesquita on codepen gotchas you can t animate inline elements even though some browsers can animate inline elements this goes against the css animation specs and will break on some browsers or eventually cease to work always animate block or inline block level elements grid and flex containers and children are block level elements too you can set an element to display inline block when animating an inline level element overflow most of the animate css animations will move elements across the screen and might create scrollbars on your web thing this is manageable using the overflow hidden property there s no recipe to when and where to use it but the basic idea is to use it in the parent holding the animated element it s up to you to figure 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 have to use javascript to achieve this result edit this on github usage with javascript you can do a whole bunch of other stuff with animate css when you combine it with javascript a simple example const element document queryselector my element element classlist add animate__animated animate__bounceoutleft you can detect when an animation ends const element document queryselector my element element classlist add animate__animated animate__bounceoutleft element addeventlistener animationend do something or change its duration const element document queryselector my element element style setproperty animate duration 0 5s you 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 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 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 x 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 change we have added a prefix for all of the animate css classes defaulting to animate__ so a direct migration is impossible but fear not although the default build 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 if you re using a bundler update your import from import animate min css to import animate compat css notice that depending on your project s configuration this might change a bit 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 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 in the case of a new project it s highly recommended to use the default prefixed version as it ll make sure that you ll hardly have classes conflicting with your project besides in later versions we might decide to discontinue the animate compat css file edit this on github custom builds custom builds are not 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 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 animate css git cd animate css npm install next run npm start to compile your custom build three files will be generated animate css raw build easy to read and without any optimization animate min css minified build ready for production animate compat css minified build ready for production without class prefix this should only be used as an easy path for migrations for example if you ll only use 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 be generated at the root of the project changing the default prefix it s pretty straight forward to change animate s prefix on your custom build change the animateconfig s prefix property in the package json file and rebuild the library with npm start on animate css package json animateconfig prefix mycustomprefix__ then 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 system 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 animate css creator maintainer core contributor edit this on github license and contributing animate css is licensed under the hippocratic license contributing 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 code of conduct 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 animate eltonmesquita com edit this on github v4 1 1 animate css is a hippocratic 2 1 licensed library you can use it freely respecting the terms included in the license file hey it seems that you have animations disabled on your os turning animate css off animate css supports the prefers reduced motion css media featu...