Skip to content

mirisuzanne/compass-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This plugin is mainly for adding animations to older versions of Compass.

  • The latset version of Compass has this code merged in, so there's no need for this plugin. We're not updating it anymore.
  • If you are looking for Dan Eden's Animate.css ported to Compass, try the compass-animate plugin.

Animation Compass Plugin

First and foremost, this plugin gives you all the tools you need to write and apply css3 animations in compass. 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 Sass 3.2 and Compass 0.12

gem install animation --pre

require 'animation'

@import "animation";

Animation

The default import only includes the core mixins for creating animations. That covers all the expected properties, to be used exactly as you would in CSS:

// create your animation
@include keyframes($name) {
  @content;
}

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

// shortcut to apply and adjust
@include 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;
$default-animation-play-state       : false;

For Example

Say you want to create your own animation. Start with the keyframes:

@include keyframes(my-animation) {
  0%, 100% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
}

That animation will change the background color from blue to red to blue again. Now let's apply it to something:

body {
  @include animation(my-animation 10s infinite);
}

Compare that to the official CSS spec:

@keyframes my-animation {
  0%, 100% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
}

body {
  animation: my-animation 10s infinite;
}

Pretty much identical. You're just using include/argument pairs instead of property/value pairs.

Animate.css

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, 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

You can use them like this:

.widget {
  @include animation(fadeIn);
}

You can also import a set of predefined classes for each animation:

@import "animation/animate/classes";

With those classes imported, you can simply add the class of fadeIn to any element, and watch it do the magic.

That's all there is to it.

About

css3 animation plugin for compass

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published