その自前 keyframes mixin 使うのやめろ

今まで、keyframes を使うとき、自前で次のような mixin を定義して使ってゐた。

@mixin keyframes($animationName){
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-ms-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
};

完璧だ！！
早速、Compass の transform と組み合わせて使おう！！

@include keyframes(bestAnimationEver){
  0% {
    @include transform(scale(1.0));
  }
  100% {
    @include transform(scale(2.0));
  }
}

結果

@-webkit-keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@-moz-keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@-ms-keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
  }
}

▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂うわあああああああ
Compass の keyframes を使えば、解決する。

@-moz-keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    transform: scale(2);
  }
}
@-webkit-keyframes bestAnimationEver {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes bestAnimationEver {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌