Skip to content

Latest commit

 

History

History
193 lines (144 loc) · 6.17 KB

README.mdown

File metadata and controls

193 lines (144 loc) · 6.17 KB
Raw

Animate.sass re-imagined

Refer to http://daneden.me/animate/ to view animations

Animate.sass is a Sass and Compass CSS animation library for WebKit, Firefox and beyond based on the work being done by Dan Eden in Animate.css.

The core of Animate.sass, despite being named "dot sass", is written in SCSS.

This is a forked version of animate.sass, updated to v2.1 of animate.css, and leveraging techniques to minimize css bloat. The standard library is over 3400+ lines of code unminified, using sass, you only have to use the portions which make sense for your project.

Animate.sass is a Sass and Compass CSS animation library for WebKit, Firefox and beyond based on the work being done by Dan Eden in Animate.css.

The core of Animate.sass, despite being named "dot sass", is written in SCSS. Don't hate.

Installation

  1. gem install animate-sass
  2. Add require 'animate-sass' in Compass's config.rb file
  3. Then @import animate.sass at the top of your main sass file.

Usage

Here's how it works:

  1. include the keyframes you want to use in your code. Note: Animation keyframes cannot be nested, they must be at the base level of your sass file.

    Include the entire entrances animations family

    @include animation-keyframes(fading-entrances);

    Or include just the fadeInRight keyframe

    @include animation-keyframes(fading-entrances/fadeInRight);

  2. use the animation mixin to include the animation in your css.

.my-class {
    @include animations(fadeInRight);
}

Example

This example will attach the animate.css keyframes for the fadeInRight animation inside the class 'my-class'.
```
@include animation-keyframes(fading-entrances/fadeInRight);
.my-class {
    @include animations(fadeInRight);
}
```

Animation families

attention-seekers
bouncing-entrances
bouncing-exits
fading-entrances
fading-exits
flippers
lightspeed
rotating-entrances
rotating-exits
sliders
specials

###Single animation

attention-seekers

attention-seekers/bounce
attention-seekers/flash
attention-seekers/pulse
attention-seekers/shake
attention-seekers/swing
attention-seekers/tada
attention-seekers/wobble

bouncing-entrances

bouncing-entrances/bounceIn
bouncing-entrances/bounceInDown
bouncing-entrances/bounceInLeft
bouncing-entrances/bounceInRight
bouncing-entrances/bounceInUp

bouncing-exits

bouncing-exits/bounceOut
bouncing-exits/bounceOutDown
bouncing-exits/bounceOutLeft
bouncing-exits/bounceOutRight
bouncing-exits/bounceOutUp

fading-entrances

fading-entrances/fadeIn
fading-entrances/fadeInDown
fading-entrances/fadeInDownBig
fading-entrances/fadeInLeft
fading-entrances/fadeInLeftBig
fading-entrances/fadeInRight
fading-entrances/fadeInRightBig
fading-entrances/fadeInUp
fading-entrances/fadeInUpBig

fading-exits

fading-exits/fadeOut
fading-exits/fadeOutDown
fading-exits/fadeOutDownBig
fading-exits/fadeOutLeft
fading-exits/fadeOutLeftBig
fading-exits/fadeOutRight
fading-exits/fadeOutRightBig
fading-exits/fadeOutUp
fading-exits/fadeOutUpBig

flippers

flippers/flip
flippers/flipInX
flippers/flipInY
flippers/flipOutX
flippers/flipOutY

lightspeed

lightspeed/lightSpeedIn
lightspeed/lightSpeedOut

rotating-entrances

rotating-entrances/rotateIn
rotating-entrances/rotateInDownLeft
rotating-entrances/rotateInDownRight
rotating-entrances/rotateInUpLeft
rotating-entrances/rotateInUpRight

rotating-exits

rotating-exits/rotateOut
rotating-exits/rotateOutDownLeft
rotating-exits/rotateOutDownRight
rotating-exits/rotateOutUpLeft
rotating-exits/rotateOutUpRight

sliders

sliders/slideInDown
sliders/slideInLeft
sliders/slideInRight
sliders/slideOutUp
sliders/slideOutLeft
sliders/slideOutRight

specials

specials/hinge
specials/rollIn
specials/rollOut

Credits and special thanks

Huge thanks to Dan Eden on his project Animate.css. This project would not exist without his hard work. Thanks as well to Nick Pettit for his CSS3 animation library Glide.

Special thanks needs to also go out to Thoughtbot and Bourbon. I borrowed some of their CSS3 animation mixins and "tailor fit" them to my needs.

Also, I want to thank theCSSguru, adamstac, and polikin for earlier versions and contributions of this framework.

License

Copyright (c) 2013 Joshua Ellinger

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.