[Sass & Compass] Compass: CSS3 animation の prefix 付きコードを生成する

CSS3 animation の prefix が面倒なので Compass で楽したい。

[markdown]
## 利用する mixin と prefix

CSS を生で書こうとするとなかなかつらい。
prefix も正確なところが不安なので mixin を使います。

> * [CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS)

### CSS3 Transforms

> * [Compass Transform | Compass Documentation](http://compass-style.org/reference/compass/css3/transform/)
> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=transforms2d)

### CSS3 Animation

> * [Compass Animation | Compass Documentation](http://compass-style.org/reference/compass/css3/animation/)
> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=css-animation)

## つかいかた

Compass mixin を使って書きます。

“`css:.scss
.activeslide {
@include animation(move 9s ease infinite);
}
@include keyframes(move) {
from {
@include transform(scale(1.2));
}
to {
@include transform(scale(1.0));
}
}
“`

このような CSS を生成してくれました。

“`css:.css
.activeslide {
-moz-animation: move 9s ease infinite;
-webkit-animation: move 9s ease infinite;
animation: move 9s ease infinite;
}
@-moz-keyframes move {
from {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
to {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes move {
from {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes move {
from {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
to {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
“`

> * [Supersized: Ken Burns effect を追加する | deadwood](https://www.d-wood.com/blog/2014/08/17_6635.html)

たすかる。

## 補遺

> * [Keyframe Animation Syntax | CSS-Tricks](http://css-tricks.com/snippets/css/keyframe-animation-syntax/)
> * [SASSでCSSアニメーションの記述を楽にする | SAITEI no CHINJUU!!!（最低の珍獣）](http://met.hanatoweb.jp/archives/386/)
> * [[Sass]泣くほど早い…今すぐ使える便利なmixin集 | Cappee Design](http://cappee.net/coding/sass-scss/mixin-matome#i-16)
[/markdown]