js経由でcss keyframeアニメーションを使う

• jeremy kahnはこれをcssプリレンダリングと命名してる
  • 命名としてわかりにくい
  • 「CSSのアニメーションのパフォーマンスについて、長きに渡り研究を重ねて来たJeremy Kahnがたどり着いた一つの解答。CSSプリレンダリングと名付けた手法について詳しく解説。」と書かれてるのを読んでもよくわからなかったのでメモ
• 割とシンプルな話

jeremyの記事

• 60 FPS or Bust: Dynamically Prerendering CSS Animations - Jeremy Kahn's Dev Blog
• 書いてる内容
  • htmlでのアニメーションは長年jsしかなかった
  • 最近の収穫はcssアニメーションはパワフル。けど柔軟じゃない
  • アニメーションのcssスタイルのセットをサクッと作ること、サクッとページに適用すること
  • htmlやcssファイルにkeyframeアニメーション用のcssスタイルを一切書かず、js経由で生成・適用するやり方の紹介
• requestanimationframeは関係ない
• jsライブラリRekapiを使って色々楽をする
  • style生成
  • polyfill

やってること

cssのkeyframeアニメーションやるならこんなスタイルを書く。

.stylie {
  -moz-animation-name: stylie-transform-keyframes;
  -moz-animation-duration: 2000ms;
  -moz-animation-delay: 0ms;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: stylie-transform-keyframes;
  -ms-animation-duration: 2000ms;
  -ms-animation-delay: 0ms;
  -ms-animation-fill-mode: forwards;
  -ms-animation-iteration-count: infinite;
  -o-animation-name: stylie-transform-keyframes;
  -o-animation-duration: 2000ms;
  -o-animation-delay: 0ms;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -webkit-animation-name: stylie-transform-keyframes;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-name: stylie-transform-keyframes;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@-moz-keyframes stylie-transform-keyframes {
  0% {-moz-transform:translateX(0px) translateY(0px);}
  100% {-moz-transform:translateX(400px) translateY(0px);}
}
@-ms-keyframes stylie-transform-keyframes {
  0% {-ms-transform:translateX(0px) translateY(0px);}
  100% {-ms-transform:translateX(400px) translateY(0px);}
}
@-o-keyframes stylie-transform-keyframes {
  0% {-o-transform:translateX(0px) translateY(0px);}
  100% {-o-transform:translateX(400px) translateY(0px);}
}
@-webkit-keyframes stylie-transform-keyframes {
  0% {-webkit-transform:translateX(0px) translateY(0px);}
  100% {-webkit-transform:translateX(400px) translateY(0px);}
}
@keyframes stylie-transform-keyframes {
  0% {transform:translateX(0px) translateY(0px);}
  100% {transform:translateX(400px) translateY(0px);}
}

• これをhtmlファイルやcssファイルに直書きすると、柔軟じゃないので、それはやらない
• cssのkeyframeアニメーションに必要なcssのセレクタと@keyframe宣言のリストをオンザフライで生成
• リストは文字列として生成
• style要素を生成し、そこにスタイルのリストを突っ込む
• style要素をdomツリーに突っ込む
• 要らなくなったら破棄とか、新たに足すとか、あとは柔軟に

スタイルのリストを生成する手間を軽減するのがrekapi

• • Rekapi - A keyframe animation library for the web
  • polyfillにもなってる
  • keyframeアニメーション非サポートブラウザ向けにはピュアjsアニメーションを用意してくれる。

js経由でcssスタイルを作るやり方は２つ

• DOMツリー触らないなやり方と、style要素だけ操作するやり方の２つ
• CSSStyleSheetオブジェクト使うのが１つ
  • document.styleSheetsで取れる
  • このオブジェクトにスタイルor宣言をadd/deleteする
  • jsのオブジェクトの操作になるけど追加は深く考えないでできる
  • 削除が面倒そう
    • 削除するメソッドに削除したいセレクタor宣言のindexを指定して消す方法しか無さそう
    • ベストプラクティスがわからん
• style要素に突っ込むのがjeremyが使ってるやつ
  • Rekapiのテクニックもこっちを使ってる