Compass Animate

Submitted by: Submitted by

Views: 108

Words: 586

Pages: 3

Category: Other Topics

Date Submitted: 04/16/2014 11:40 AM

Report This Essay

**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% {...