Autoprefixerの@keyframes animation の処理に違和感があったけど、僕が間違っていた

公開日

2014-05-07

タグ

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 ｻｲｺｰ!!