Submitted by: Submitted by testing
Views: 108
Words: 586
Pages: 3
Category: Other Topics
Date Submitted: 04/16/2014 11:40 AM
**Note:** This is still fairly new. All the core mixins and animations work,
but I don't promise the same for all the shortcuts,
and I know the documentation could use work.
If you run into any problems, please file and issue.
Even better, fix it and file a pull request.
Thanks!
Compass Animate
===============
This is the new home for
Eric Meyer's Compass port of
[animate.css][animate]
by [Dan Eden][dan].
It is splitting off from
[compass-animation][ca]
because the majority of that plugin
has moved into [Compass 0.13][c13].
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).
```bash
gem install animate --pre
```
```ruby
# config.rb
require "animate"
```
```scss
// *.scss
@import "animate";
```
[animate]: http://daneden.me/animate/
[dan]: http://daneden.me/
[ca]: https://github.com/ericam/compass-animation
[c13]: http://beta.compass-style.org/reference/compass/css3/animation/
## Usage
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:
```scss
// Include all the animation keyframes:
@include animate;
```
But you can get much more detailed:
```scss
// Temlate:
// @include animate[-animationName]([$sub: all, $class: false]);
```
Let's say you want just the "flash" animation:
```scss
// Include only the flash animation keyframes
@include animate-flash;
```
But you also want a pre-defined class
that calls that animation:
```scss
// Include only the flash animation keyframes,
// with associated class name:
@include animate-flash($class:true);
```
That will output:
```css
@-moz-keyframes flash { 0% { opacity: 1; }
25% {...