Autoprefixerの@keyframes animation の処理に違和感があったけど、僕が間違っていた
- 公開日
- タグ
- CSS
ポストプロセッサーのAutoprefixer、大変強力で素晴らしく便利なのだけど、@keyframes
の処理には違和感があった。
以下の様な CSS ルールセットがあったとする。translate
で要素の Y 座標を+300px するだけの簡単なアニメーション。animation-deday
, animation-iteration-count
, animation-direction
は規定値ということでショートハンドで省略している。
.ugoku {
animation: ugoku 0.5s ease-in;
}
@keyframes ugoku {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 300px);
}
}
これを Autoprefixer を使って last 2 versions とか適当につけて実行すると、以下のように展開される。
.ugoku {
-webkit-animation: ugoku 0.5s ease-in 0 1 normal;
animation: ugoku 0.5s ease-in 0 1 normal;
}
@-webkit-keyframes ugoku {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 300px);
transform: translate(0px, 300px);
}
}
@keyframes ugoku {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 300px);
transform: translate(0px, 300px);
}
}
@-webkit-keyframes
と @keyframes
の両方に -webkit-transform
と transform
が入っている。僕はずっと、これはおかしいのではないかと思っていた。@-webkit-keyframes
内には -webkit-transform
だけでいいし、@keyframes
には -webkit-transform
はいらないだろう、以下のようになるべきだ、と。
.ugoku {
-webkit-animation: ugoku 0.5s ease-in 0 1 normal;
animation: ugoku 0.5s ease-in 0 1 normal;
}
@-webkit-keyframes ugoku {
0% {
-webkit-transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 300px);
}
}
@keyframes ugoku {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 300px);
}
}
スッキリやん! FTW やん! でも僕が間違っていた。
というのも、animation
と @keyframes
と transform
が同時に unprefix される保障はない。もし transform
が unprefix されないまま @keyframes
が unprefix されたら、上記 CSS ではアニメーションが正常に動くかはわからない。だから @keyframes
にも prefix が付与されていたのか。
Autoprefixer 賢い! Autoprefixer サイコー!!