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

ポストプロセッサーの 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-transformtransformが入っている。僕はずっと、これはおかしいのではないかと思っていた。@-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@keyframestransformが同時にunprefixされる保障はない。もしtransformがunprefixされないまま@keyframesがunprefixされたら、上記CSSではアニメーションが正常に動くかはわからない。だから@keyframesにもprefixが付与されていたのか。

Autoprefixer賢い! Autoprefixerサイコー!!