アニメーションを滑らかに。25アニメーションを滑らかに。スムーズなアニメーションの作り方。作る次世代ウェブサイトマークアップの話や、css設計の話、あと最後のスペシャルセッションのLTも聞きたかったので、動画のアーカイブ確認します。聞いた中でも、なんとなく聞いたことあったけどそういうことなのか、という糸口が見つかったような気がしたのが、アニメーションのセッション。スライドも公開してもらえるっぽいので、わかったらリンクはります。自分の理解した範疇でのメモ書きです。0);ってしたら、綺麗になるらしいよー、なんかGPU使ってるかららしいよー。いうくらいの感じで、なんとなく指定したら綺麗になったしよかったよかった、という感じでした。GPUレイヤー化なんかGPU使ってるらしいよ、というのであれば、じゃあそうじゃない場合(CPUでアニメーションしている場合)はどうなのかというと、要素を移動させるごとに描画を行っているよう。Blog描画してるのを見れるようにするとよくわかる。http://people.mozilla.org/~bbirtles/pres/html5j-2014/#/33それをGPUレイヤー化すると、描画されたレイヤーをアニメーションするので、再描画が発生しないということ。そこはブラウザがうまいことやってくれていて、勝手に判断してレイヤー化してくれているケースがあるとのこと。(リフローしない場合のみ?)ただ、そのブラウザ側の判断も、アニメーションがはじまってからの判断になるので、アニメーションの最初はレイヤー化が間に合わず少しガタついてしまう可能性があるようです。事前にお知らせするwill-changeそこで、事前にこのプロパティが変化しますよーと伝えておけるのが、will-changeプロパティ。transformハックというらしい)も、cssの適用時にそれでレイヤーを生成するので、いいんじゃないかと思ったけど、まぁ本来の用途とは違うのでそういった使い方すべきじゃないよねということと、影響範囲が掴みづらいというところでしょうか。will-changeだと、指定したプロパティに関する範疇での最適化にとどまるから、みたいな。補足こんなメモ書きのようなブログエントリ読むより、以下読めば良い。will-changeプロパティについて知っておくべきことどうやら、今回のセッションは、以下のアップデート版みたい。その当時も話題になってたっぽいのに気づいてなかった。ブラウザーに優しくして、アニメーションを滑らかにその時はFirefoxは実装中ということだったみたいだけど、Firefoxも36で実装されるということだそうです。use...感想まだiOSで使えないので、使えるブラウザではちょっといい感じになるという使い方になるのかな。will-changeのことだけじゃなく、リフロー/リペイント、スタッキングコンテキストなど、周辺含めてわかっておかないと、とりあえずwill-change指定したらいいよみたいな、初心者っぽいTIPSに終わってしまいそうなので、その辺もちゃんと知識つけたい。