SCSS アニメーションを簡単に実装するmixinとか

Sassのmixinを利用して簡単に@keyframesとanimationをかける方法が載っていました！

1. @keyframesを生成する@mixin

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  } 
  @keyframes $animation-name {
    @content;
  }
}

2. animationプロパティを作る@mixin

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

3. アニメーション名(animationSample)を指定して @keyframes を作る

@include keyframes(animationSample){
    0% {
        opacity:0;
        transform: translateX(100%);
    }
    100% {
        opacity:1;
        transform: translateX(0);
    }
}

4. アニメーションさせる要素にanimationプロパティを与える

#hoge{
    @include animation(animationSample 1.2s ease 0.15s);   
}

こんな感じでとても便利だと思いました。
早速導入してみたところgruntでコンパイルしていたのですがコンパイル後のCSSをみると...

/* CSS */
@keyframes $animation-name {
  0% {
    opacity:0;
    transform: translateX(100%);
  }
  100% {
    opacity:1;
    transform: translateX(0);
  }
}

@keyframesのアニメーション名が引数のanimationSampleになって欲しかったのですが、変数のつもりだった$animation-nameがそのまま文字列として出力されてしまっていました。

@keyframesを生成する@mixinのアニメーション名が変数になるようにする

#{$variable} という書き方が使えるようです。
1. で作成したmixinを修正します。

@mixin keyframes($animation-name: animaton) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

これでコンパイルすると...

/* CSS */
@keyframes animationSample {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

無事 @keyframesのアニメーション名が引数で付けることができていました！
このmixinすごく便利ですね！

アニメーションの本―動く絵を描く基礎知識と作画の実際