Animate.sass
Intro
This is originally authored by Nick Pettit and I converted it to SASS.
You can find a full list of available animations down the page.
Installation
All together
Copy and include the stylesheet on your document's <head>
or use the version hosted by SmallCDN
Customizable
Clone this repository or use npm:
$ npm install animate.sassmake a copy of scss/animate.scss and name it animate-custom.scss, comment out whatever
animation you don't like then compile it with a SASS compiler.
Don't forget to correct import addresses to fit your needs!
Usage
You need to add animated class plus the animation-name you like to use:
You can also extend jQuery to add a function that does it all for you using js/animate.js which is a
simple jQuery plugin you can use like this:
;Note: There is an infinite class available to make animations infinite.
Animations available
You can also check demos to find your specific needs.
Bounce
- bounce
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
Fade
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
Flip
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
Light Speed
- lightSpeedIn
- lightSpeedOut
Roll
- rollIn
- rollOut
Rotate
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
Slide
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Zoom
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRIght
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
Other
- flash
- hinge
- jello
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
Licence
Same as the original author, this package is under MIT Licence, simply means Do whatever you like just don't delete my name.