CSS3

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) 
}

続きを読む