Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mirisuzanne/compass-animation

css3 animation plugin for compass
https://github.com/mirisuzanne/compass-animation

Last synced: 14 days ago
JSON representation

css3 animation plugin for compass

Awesome Lists containing this project

README 

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



- The latset version of Compass has this code 

[merged in](http://compass-style.org/reference/compass/css3/animation/), 

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][animate] plugin. 



[animate]: https://github.com/ericam/compass-animate



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](http://daneden.me/animate/)" 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:



```scss

// 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:



```scss

$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:



```scss

@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:



```scss

body {

  @include animation(my-animation 10s infinite);

}

```



Compare that to the official CSS spec:



```css

@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:



```scss

.widget {

  @include animation(fadeIn);

}

```



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



```scss

@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.