[Sass] Compass CSS3-animations snipets & mixin

CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。

@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ

transformを参考にまとめたmixin

//再生時間
$default-animation-duration       : 0.5s !default;     

//実行までの待ち時間
$default-animation-delay          : 0    !default;

//実行回数(number | infinite)
$default-animation-iteration-count: 1    !default;

//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;

//反復の有無(normal | alternate)
$default-animation-direction: normal     !default;

//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
$default-animation-fill-mode: both       !default;

@mixin animation (
  $name     :false, 
  $duration :$default-animation-duration,
  $delay    :$default-animation-delay,
  $count    :$default-animation-count,
  $function :$default-animation-timing-function,
  $direction:$default-animation-direction,
  $fillMode :$default-animation-fill-mode
){
    @if $name {
       @include experimental(animation-name,            $name);
    }
    @include experimental(animation-duration,        $duration);
    @include experimental(animation-delay,           $delay);
    @include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
    @include experimental(animation-timing-function, $function);
    @include experimental(animation-direction,       $direction); //反復の有無(normal | alternate)
    @include experimental(animation-fill-mode,       $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
}

そのままコンパイルすると…

  -moz-animation-name: sample;
  -webkit-animation-name: sample;
  -o-animation-name: sample;
  -ms-animation-name: sample;
  -khtml-animation-name: sample;
  animation-name: sample;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -khtml-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -khtml-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -webkit-animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -khtml-animation-direction: normal;
  animation-direction: normal;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -khtml-animation-delay: 0s;
  animation-delay: 0s;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -khtml-animation-fill-mode: both;
  animation-fill-mode: both;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -khtml-animation-timing-function: linear;
  animation-timing-function: linear;
  -moz-animation-play-state: running;
  -webkit-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  -khtml-animation-play-state: running;
  animation-play-state: running;

…みたいな、プレフィックスまみれで大変な事になるんで、
要らないプレフィックスを設定でfalseにするか

$experimental-support-for-khtml:false;
$experimental-support-for-microsoft:false;
$experimental-support-for-opera:false;

mixinのオプション部分で指定する。

//experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official)
@include experimental(animation-name, sample, true, true, false, false, false, true);

変数の方は全体に適用されてしまうから、
アニメーションだけ設定したいという場合には後者が良いと思う。