Compass Animate

This is the new home for the Compass port of animate.css by Dan Eden. It is splitting off from compass-animation because the majority of that plugin has moved into Compass 0.13. This plugin is for people on the Compass edge, while that plugin remains useful to people who are still using Compass 0.12.

Compass Animate requires Compass 0.13 (currently in alpha).

gem install animate --pre

# config.rb
require "animate"

// *.scss
@import "animate";

We try our best to stay up to date with the latest from Dan Eden, but we've also made a few changes and expanded on his base.

You can include any number of named animation keyframes, each one with or without it's related class name.

The most basic option is simply:

// Include all the animation keyframes:
@include animate;

But you can get much more detailed:

// Temlate:
// @include animate[-animationName]([$sub: all, $class: false]);

Let's say you want just the "flash" animation:

// Include only the flash animation keyframes
@include animate-flash;

But you also want a pre-defined class that calls that animation:

// Include only the flash animation keyframes,
// with associated class name:
@include animate-flash($class:true);

That will output:

@-moz-keyframes flash { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes flash { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

@-o-keyframes flash { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

@-ms-keyframes flash { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes flash { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

.flash {
  -webkit-animation-name: flash;
     -moz-animation-name: flash;
      -ms-animation-name: flash;
       -o-animation-name: flash;
          animation-name: flash; }

Now you have the named keyframes for the "flash" animation and a class name that you can use in your HTML or extend with Sass.

You can also set $class to silent and get %flash which can be used with @extends but won't show up in the css.

There are a few shortcuts as well:

// this:
@include animate-fadeIn;
@include animate-fadeOut;
@include animate-fadeOutBig;

// is equal to this:
@include animate-fade(in-only out-only outBig);

If you want all the fadeOut animations:

@include animate-fade(out);

This plugin includes the following mixins & animations:

Attention

• attention
• flash, bounce, shake, tada, swing, wobble, wiggle, pulse, rubberBand

Flip (currently Webkit, Firefox, & IE10 only)

• flip, flipX, flipY
• flipIn, flipInX, flipInY
• flipOut, flipOutX, flipOutY

Fade

• fade
• fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig
• fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig

Bounce

• bounce
• bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight
• bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight

Roll

• roll
• rollIn
• rollOut

Rotate

• rotate
• rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
• rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight

LightSpeed

• lightSpeed
• lightSpeedIn
• lightSpeedOut

Special

• special
• hinge

Slide

• slide
• slideInDown, slideInLeft, slideInRight
• slideOutUp, slideOutLeft, slideOutRight

Zoom

• zoom
• zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
• zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp