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: 12 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.