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 サイコー!!