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.

Create custom build or Download on Github

To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.

Test the animations below by clicking on their name. All of the animations demonstrated below have a 0.25 second delay, last for a duration of 1 second, use a timing-function of "ease", and have a fill-mode of "both". You'll have to set these yourself in your own CSS - the class name only sets the animation name.

Live long and prosper.

Attention seekers

flash bounce shake tada

Fading entrances

fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig

Fading exits

fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig

Bouncing entrances

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight

Bouncing exits

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight

Rotating entrances

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

Rotating exits

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

Can I use this stuff?

It's all yours. Currently, CSS animations are supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10. I suggest using something like Modernizr to provide fallbacks for the browsers that don't support them.

If you do use them, let me know. I like it when people talk to me about this stuff.

What's next?

I've future-proofed animate.css by adding the non-prefixed properties for each animation and class. When more browsers adopt CSS animations and as they become part of the CSS specification, the animations will already be good to go.

If there's any particular animation you'd like to see added (maybe you saw something and wanted it replicating in CSS), then please let me know. I like a challenge, and the more great animations we have in this thing, the better!

Why not use jQuery?

animate.css is actually built to compliment tools like jQuery. CSS animations are pretty frickin' awesome - they use hardware acceleration natively, unlike JavaScript-powered animations. Use something like Modernizr to detect support for CSS3 animations, then use jQuery or another library to provide fallback animations for the browsers that don't support them. It's a win-win situation.

If you don't believe me, check out this page. It'll use fancy CSS animations on the slider where possible, and provides a JavaScript fallback that still provides the functionality required for browsers that don't support CSS animation.

I like visual aids, like videos.

Me too pal. Here's a fun video.

dConstruct 2011 Videos

dConstruct 2011 brought together leading thinkers from the fields of interaction design, mobile design and ubiquitous computing to explore how we could bridge the gap between physical and digital product design.

← Back to dConstruct.org

Emotional Design for the World of Objects

Don Norman

Beyond Usability: Mapping Emotion to Experience

Kelly Goto

Letting Go

Bryan & Stephanie Rieger

What Is the Shape of the Future Book?

Craig Mod

Oh God, It’s Full of Stars

Frank Chimero

The Full Stack of Entertainment: Storytelling, Play and Code

Dan Hon

The Transformers

Kars Alfrink

Pocket Scale

Matthew Sheret

Reality is Plenty

Kevin Slavin