Sass&Compass CSS3 animation mixin

_animation.scss

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// CSS3 animation mixin  
// !!! NEED Compass !!!  
//
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

// # Animation
//
// animationショートハンドにベンダープレフィックス付けるmixin  
//
// `$name` - animation-name  
// `$duration` -- animation-duration  
// `$function` -- animation-timing-function  
// `$delay` -- animation-delay  
// `$count` -- animation-iteration-count  
// `$direction` -- animation-direction  
// `$fillMode` -- animation-fill-mode
//
@mixin animation (
  $name     :none, 
  $duration :$default-animation-duration,
  $function :$default-animation-timing-function,
  $delay    :$default-animation-delay,
  $count    :$default-animation-iteration-count,
  $direction:$default-animation-direction,
  $fillMode :$default-animation-fill-mode
){
   @include experimental(animation, $name $duration $function $delay $count $direction);
   @if $fillMode {
     @include animation-fill-mode($fillMode);
   }
   
}

// ## animation-name
//
// `$name` -- アニメーション名

// ```SCSS
// @include animation-name('hoge');
// ```
@mixin animation-name($name){
  @include experimental(animation-name, $name);
}

// ## animation-duration
//
// `$duration` -- 再生時間. 指定なければ `$default-animation-duration`
//
// ```SCSS
// @include animation-duration(1s);
// ```
@mixin animation-duration($duration: $default-animation-duration){
  @include experimental(animation-duration, $duration);
}

// ## animation-delay
//
// `$delay` -- 遅延. 指定なければ `$default-animation-delay`
//
// ```SCSS
// @include animation-delay(1s);
// ```
@mixin animation-delay($delay: $default-animation-delay){
  @include experimental(animation-delay, $delay);
}

// ## animation-count
//
// `$count` -- 実行回数(number | infinite) 指定なければ `$default-animation-iteration-count`
//
// ```SCSS
// @include animation-count(5);
// ```
@mixin animation-count($count:$default-animation-iteration-count){
  @include experimental(animation-iteration-count, $count); 
}

// ## timing-function
//
// animation-timing-funtion ショートハンド
// 
// ```SCSS
// @include animation-function('ease-in');
// ```
@mixin animation-function($function:$default-animation-timing-function) {
  @include animation-timing-function($function);
}

// ## animation-timing-function
//
// `$function` -- イージング. 指定無ければ `$default-animation-timing-function`
//
// ```SCSS
// @include animation-timing-function('ease-in');
// ```
@mixin animation-timing-function($function:$default-animation-timing-function){
  @include experimental(animation-timing-function, $function);
}

// ## animation-direction
//
// `$direction` -- 反復の有無(normal | alternate) 指定なければ　`:$default-animation-direction`
//
// ```SCSS
// @include animation-direction('alternate');
// ```
@mixin animation-direction($direction:$default-animation-direction){
  @include experimental(animation-direction, $direction); 
}

// ## animation-fill-mode
//
// `$fillMode` -- 実行前や実行後のスタイル指定(none | forwards | backwards | both)
//  指定なければ `$default-animation-fill-mode`
//
// ```SCSS
// @include animation-fill-mode('alternate');
// ```
@mixin animation-fill-mode($fillMode:$default-animation-fill-mode){
  @include experimental(animation-fill-mode,  $fillMode);
}

// ## animation-play-state
// 
// `$state` -- 再生状況(running | paused)
//
// ```SCSS
// @include animation-play-state('paused');
// ```
@mixin animation-play-state($state) {
  @include experimental(animation-play-state, $state);
}

// ## アニメーションキーフレーム
//
// `$name` -- アニメーション名
//
// ```SCSS
// @include keyframes(sample) {
//   $top:0px;
//   $left:0px;
// 
//   @each $step in 0 50 100 {
//    $top:0px + ($step * 2);
//    $left:0px + ($step * 2);
// 
//    #{$step + 0%} {
//      top:$top;
//      left:$left;
//    }
//  }
// }
// ```
@mixin keyframes ($name) {

  @if $keyframes-support-for-mozilla == true {
    @-moz-keyframes $name{
      @content;
    }
  }

  @if $keyframes-support-for-webkit == true {
    @-webkit-keyframes $name{
      @content;
    }
  }

  @if $keyframes-support-for-original == true {
    @keyframes $name{
      @content;
    }
  }

}