animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star half bd79095782ee4930099175e5ce7f4c89fa3ddabcd56fffcc7c74f6f2a2d46b27 (2 ratings)
Rated 4.75 out of 5
Subscribe to updates I use animate.css


Statistics on animate.css

Number of watchers on Github 49738
Number of open issues 14
Average time to close an issue 27 days
Main language CSS
Average time to merge a PR 14 days
Open pull requests 64+
Closed pull requests 43+
Last commit 8 months ago
Repo Created almost 7 years ago
Repo Last Updated 6 months ago
Size 591 KB
Homepage http://daneden.gi...
Organization / Authordaneden
Latest Release3.5.2
Contributors56
Page Updated
Do you use animate.css? Leave a review!
View open issues (14)
View animate.css activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating animate.css for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about animate.css Leave a review
love animations!

Animate.css GitHub release CDNJS Build Status devDependencies Status chat npm version

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Installation

To install via Bower, simply do the following:

$ bower install animate.css --save

or you can install via npm:

$ npm install animate.css --save

Basic Usage

  1. Include the stylesheet on your document's <head>
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Instead of installing you may use the remote version (hosted by CDNJS):

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

You may generate a SRI hash of that particular version and then use it to ensure the file's integrity; also you can make anonymous requests to CDN by setting the corresponding crossorigin attribute:

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
</head>
  1. Add the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.

  2. Finally you need to add one of the following classes:

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp

Full example:

<h1 class="animated infinite bounce">Example</h1>

Check out all the animations here!

Usage

To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

or use the version hosted by CDNJS

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

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

You can also detect when an animation ends:

// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
  var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement('div'));

$('#yourElement').one(animationEnd, doSomething);

View a video tutorial on how to use Animate.css with jQuery here.

Note: jQuery.one() is used when you want to execute the event handler at most once. More information here.

You can also extend jQuery to add a function that does it all for you:

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});

And use it like this:

$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});

You can change the duration of your animations, add a delay or change the number of times that it plays:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

Note: be sure to replace vendor in the CSS with the applicable vendor prefixes (webkit, moz, etc)

Custom Builds

Animate.css is powered by gulp.js, and you can create custom builds pretty easily. First of all, youll need Gulp and all other dependencies:

$ cd path/to/animate.css/
$ sudo npm install

Next, run gulp to compile your custom builds. For example, if you want only some of the attention seekers, simply edit the animate-config.json file to select only the animations you want to use.

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}

License

Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Contributing

Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

animate.css open issues Ask a question     (View All Issues)
  • almost 2 years Animation in Google Chrome Not Fluid
  • almost 2 years Bad naming effects!!!
  • almost 2 years 'Jello' animation incompatible with latest iOS Safari?
  • almost 2 years animate.css and jquery in new firefox
  • almost 2 years Uncaught SyntaxError: Invalid or unexpected token
  • almost 2 years How to replicate the random text color generator used in this website?
  • almost 2 years How do I get the animation to start on scroll?
  • about 2 years Regression on bounce animate.min.css introduced in 3.5.1
  • about 2 years Add prefix
  • about 2 years Animate.css not working in chrome 51.0 but works in firefox
  • over 2 years How to repeat chained animations?
  • over 2 years Version number not incremented in latest release
  • over 2 years Animate.css and typeahead z-index problems.
  • over 2 years New class for speed of animation
  • over 2 years Using jQuery addClass not working with uppercase characters
  • over 2 years animate-config.json structure
  • over 2 years gulp autoperfix not work
  • over 2 years Animate to Transformed State
  • over 2 years Webpack loader - if you want to include a link.
  • over 2 years animate not working at Windows Phone
  • over 2 years Performance Improvement Hints (will-change)
  • over 2 years Animations not working correctly in IE10
  • over 2 years How to make it shows shadow and save z-index?
  • over 2 years Add sliding animations to animate.scss
  • over 2 years animations not working in iOS 9.2 safari
  • over 2 years Add changelog
  • almost 3 years Use filtering (bilinear or bicubic) for animations that use scale3d
  • almost 3 years Pulse causing placement and border-radius issues
  • almost 3 years Bower - Use dist/ for final product
  • almost 3 years Element disappearing after animate (flipInX) – Safari 9 OS X
animate.css open pull requests (View All Pulls)
  • Add cwd option for gulp.src
  • Updated year in licence
  • Move files to dist directory
  • New animation proposal: Float
  • New animation: Squash
  • replace transform: none to transform: translate3d(0,0,0)
  • changed project name to animate-css in bower.json
  • +Added new short fade transitions
  • Switch to Sass
  • gulp: polyfill for old node version
  • Synchronize master / gh-pages branches / demo task (watch, connect)
  • #479 fixes bounceIn animations for iOS devices
  • Animate.css Builder Web Version
  • #537 will-change performance improvements
  • Update README.md
  • Config generator
  • Remove double "the" from README.md
  • [bower.json] source dir removed from the ignore array
  • Updated Readme.md
  • Added hosted libraries into README.md
  • Update README.md
  • Add blur animations
  • chore(build): removed redundant postcss operation
  • Prevent double execution of code on animation end
  • Note animatify for Browserify users in the README
  • support es6 syntax & gulp serve
  • added new animation style - advertise
  • add npm installation to readme
  • Added option to keep results of animations.
  • Update README.md
  • The SmallCDN is no longer working
  • 修改animate
  • Replace unnecessary jQuery $(this) to this
  • Animate.css Builder Web Version
  • Bronken link
  • New Special - jackInTheBox
  • Add CDNJS version badge in readme
  • Remove event names for prehistoric browsers from README
  • recommend using SRI hashes and `crossover` attributes
  • zero
  • added sass/eyeglass support
  • added new animation name bye
  • Fixed Custom Builds
  • Add jackInTheBox to gh-pages
  • New Animation: Fold
  • Custom Built JSON
  • Fix broken headings in Markdown files
  • added a space
  • fix headings
  • Add animation chaining to README example
  • explain primitive chaining of animations (in README)
  • New animations: zoomInFront, zoomOutFront
  • Format fix for README.md
  • readme markup fix
  • format
  • format
  • Made class list a Markdown table in README
  • Animate.css Builder Web Version (Fixed)
  • Added an animation called stretch
  • New Twist animations added
  • Adding in README.md a pure javascript to create a simple animateCss function in HTMLElement prototype
  • Minor Update and Fixes
  • Delete verbose code.
  • verbose opacity
animate.css questions on Stackoverflow (View All Questions)
  • onclick with javascript and animate.css
  • Animate.css not working dont know why?
  • animate.css: How do you have the css animation work only the first time?
  • How to use the `Animate.css` to the `angular` app?
  • onload add class animate.css
  • Animate.css on scroll bug chrome/firefox
  • animate.css animating distance
  • Trigger jQuery animate.css function
  • bxslider text effects animate.css
  • animate.css: repeating animations
  • transform rotate() not working with Animate.css
  • How to run the custom animate.css grunt task from my grunt file?
  • FIrefox animate.css animations not consistent
  • jQuery animate.css not working correctly on Firefox only
  • Animate.css and fixed positioning
  • Animate.css Not working
  • Animate.CSS Replay?
  • Mobile browsers leaving whitespace with Animate.css
  • How to adjust the height for fadeInUp in ng-animate or Animate.css?
  • How to add interval between cycles of css animation which is coded in animate.css?
  • Build a simple ticker that change the divs every 6 seconds using animate.css
  • Animate.css Messing Up My Site
  • animate.css - Detect the animation end
  • Why can I not access an element after it has been animated in jQuery and Animate.css?
  • How to adding animate.css animation when an element is shown with jQuery
  • Animate.css causing black rects in Firefox
  • jQuery + Animate.css animation only working once, animation not resetting
  • Is arrangement of Animate.css and main.css files affecting functionality
  • Ionic Framework animate.css slideInUp and SlideOutUp animation not working
  • Animate in order with angular and animate.css
animate.css list of languages used
Other projects in CSS