Animate.less
Cross-browser CSS3 animation library
If you're a web hipster, and you're already using Twitter's Bootstrap like a whore, you're gonna love this.
animate.less
, originally created by Dan Eden, is a bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Usage
Files
animate.css
is 64kb and animate.min.css
is 48kb.
Getting a Copy
You can use bower, npm, or download a zip.
bower
bower --save install animate.less
npm
npm --save install animate.less
Bootstrap/LESS
To use animate.less in your Bootstrap project, simply add the line below into bootstrap.less
:
;
Inside your HTML
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!
For example:
...
Inside your stylesheet
Since we're using LESS, we can utilize our animation library by adding .animated
and any of the many animation names as classes.
For example:
Note: if you're having issues, try re-compiling bootstrap.less
for changes to take effect.
Extending with jQuery
You can add more functionality to your animations with jQuery such as below:
;
We can also bind these classes with events or triggers like below:
;
Editing an animation effect
You can 1) change the duration of your animations with the LESS varible @animationLessTime
, 2) extend the delay, or 3) change the number of times that it plays. If you do edit an animation effect, make sure you change them cross-browser.
Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o).
Note: Safari in Mountain Lion (OS X 10.8) has a display glitch with the Flippers. They may not appear at all until the animation is completed, or the page may have other artifacting. One fix is to add overflow: hidden to the parent div.
Build a custom library
Head over to http://daneden.me/animate/build/ to select which animations you need. This will download a .css file, so just rename it to .less and use as described above.
You can also pick & choose which LESS files in your own LESS, just set the variables & import stuff (see animate.less for example):
@animationLessTime: 0.5s;@animationLessLocation: '../node_modules/animate.less/source'; "@{animationLessLocation}/animated.less"; "@{animationLessLocation}/bounce.less"; "@{animationLessLocation}/bounceIn.less"; "@{animationLessLocation}/bounceInDown.less"; "@{animationLessLocation}/bounceInLeft.less"; "@{animationLessLocation}/bounceInRight.less"; "@{animationLessLocation}/bounceInUp.less"; "@{animationLessLocation}/bounceOut.less"; "@{animationLessLocation}/bounceOutDown.less"; "@{animationLessLocation}/bounceOutLeft.less"; "@{animationLessLocation}/bounceOutRight.less"; "@{animationLessLocation}/bounceOutUp.less";
Live demo
View the animation library in action over at http://daneden.me/animate/.
Browser Support
Since we're using CSS3 here, we're limited to only modern browsers like Chrome, Safari, Mozilla, and Opera.
License
Animate.css is licensed under the ☺ license. (http://licence.visualidiot.com/)
Future Development
I'll shortly be compiling an animation-library.less
which will allow you to pick and choose which effects you need in your project.
Down the line, IE8/9 support hopefully.
Learn more
You can learn more about animate.css over at http://daneden.me/animate and Twitter Bootstrap over at http://getbootstrap.com/
Cheat Sheet
Attention seekers:
flash bounce shake tada swing wobble wiggle pulse
Flippers (currently Webkit, Firefox, & IE10 only):
flip flipInX flipOutX flipInY flipOutY
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
Lightspeed:
lightSpeedIn lightSpeedOut
Specials:
hinge rollIn rollOut
Development
- Type
npm install
to install the dev tools. - Type
npm run build
to build the CSS files. Check outpackage.json
to see how to add these tools to your own LESS-based project.