Animate.css: Plug and Play CSS Animations
DZone's Guide to
Animate.css: Plug and Play CSS Animations
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Who needs Flash for simple web animations these days? In fact, who needs jQuery? Animate.css is a recently unveiled bundle of CSS animations that you can use just by adding the class to the element, or by calling the in your CSS file. Classes and the animations have the same name. Dan Eden, the author, explains why you might use these over jQuery:
The animations are supported in Chrome, Safari, Opera, and Firefox (and soon IE10). Dan suggests you use Modernizr to detect CSS3 animations support and then trigger jQuery for the fall backs.
Check out the Animate.css page to see it in action!
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. -- Dan Eden
The animations are supported in Chrome, Safari, Opera, and Firefox (and soon IE10). Dan suggests you use Modernizr to detect CSS3 animations support and then trigger jQuery for the fall backs.
Check out the Animate.css page to see it in action!
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Topics:
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}