Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
css3 animation plugin for compass
tree: 41ab314889

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Animation Compass Plugin

First and foremost, this plugin gives you all the tools you need to write and apply css3 animations. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "Animate.css" project.

This plugin requires the most recent alpha releases of both Sass (3.2.0.alpha.35) and Compass (0.12.alpha.0).

gem install animation --pre

require 'animation'

@import animation


The default import only includes the core mixins for creating animations. They are:

// create your animation

// apply animation(s) and adjust settings
+animation-name([$name-1, $name-2, ..., name-10])
+animation-duration([$duration-1, $duration-2, ..., duration-10])
+animation-delay([$delay-1, $delay-2, ..., delay-10])
+animation-timing-function([$function-1, $function-2, ..., function-10])
+animation-iteration-count([$count-1, $count-2, ..., count-10])
+animation-direction([$direction-1, $direction-2, ..., direction-10])
+animation-fill-mode([$mode-1, $mode-2, ..., mode-10])

// shortcut to apply and adjust
+animation([$animation-1, $animation-2, ..., animation-10])

There are default variables available for all of them:

$default-animation-name             : false
$default-animation-duration         : false
$default-animation-delay            : false
$default-animation-timing-function  : false
$default-animation-iteration-count  : false
$default-animation-direction        : false
$default-animation-fill-mode        : false


Because the Animate code creates output, you need to import it (or one of it's sob-modules) directly:

@import animation/animate

That will create the following named animations:

  • Attention seekers
    • flash bounce shake tada swing wobble pulse
  • 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
  • Specials
    • hinge rollIn rollOut
Something went wrong with that request. Please try again.