sass: animation, keyframes mixin

style.scss

/*! ********************
  animation, keyframes mixin 2012/09/11
  ******************** */

// NOTE: 個別プロパティの指定には対応していないです
@mixin animation( $value... ) {
  -webkit-animation:$value;
  -moz-animation:$value;
  -o-animation:$value;
  -ms-animation:$value;
  animation:$value;
}
@mixin keyframes( $name ) {
  @-webkit-keyframes #{$name} { @content }
  @-moz-keyframes #{$name} { @content }
  @-o-keyframes #{$name} { @content }
  @-ms-keyframes #{$name} { @content }
  @keyframes #{$name} { @content }
}

// usage

// set keyframes
// 引数にkeyframes名を指定
// 続くブロックに動作を指定
@include keyframes( hoge ) {
  0% {}
  100% {
    color:rgba( #fff, 0.7 );
  }
}
@include keyframes( fuga ) {
  0% {
    background:#6e8b9a;
  }
  100% {
    background:#445761;
  }
}

// set animation
// 引数にkeyframes名とタイミングを指定
body {
  @include animation(
    hoge 3s 1s forwards,
    fuga 2s infinite alternate
  );
}

// サンプル用指定なので気にしない
body {
  color:rgba( #fff, 0 );
  background:#6e8b9a;
  font-size:12px;
  padding:1em 1.5em;
  &:before {
    content:'css animation';
  }
}