"transform" Why do we have to use it in CSS animation

https://dist.connpass.com/event/155593/
の発表で使ったスライドです。

Transcript

1. “transform” Why do we have to use it in CSS animation By すぱいす On 2019-12-13 @ DIST.30
2. すぱいすって 誰だよ
3. @rabspice Name : すぱいす Job : Frontend Developer Company : eureka (Pairs作ってる) History : 新卒8ヶ月目 React, Vue, Wordpress さいきんSvelte 「スパイスからカレー作ります！」で爆誕 去年まで名古屋の大学生
4. CSSでアニメーションを書く。わりとかんたん。 @rabspice
5. CSSでアニメーションを書く。わりとかんたん。 @rabspice
6. CSSでアニメーションを書く。わりとかんたん。 @rabspice
7. @keyframes animation 定義 指定 @rabspice
8. @keyframes 定義 @rabspice ←これについて話す
9. @rabspice
10. @rabspice 右 　 下 　　 へ
11. @rabspice transform
12. @rabspice transform margin
13. @rabspice transform margin top,right bottom,left
14. @rabspice transform margin top,right bottom,left padding
15. transform top,right bottom,left margin padding @rabspice
16. 滑らかな アニメーションが お好きでしょう？
17. @rabspice 滑らかな アニメーション 60fpsを 保ち続ける
18. https://developers.google.com/web/fundamentals /performance/rendering
19. transform top,right bottom,left margin padding @rabspice
20. transform top,right bottom,left margin padding @rabspice
21. ブラウザがレンダリングする時の流れ @rabspice
22. The pixel pipeline @rabspice
23. 視覚的な変化のトリガー (JSに限らず)
24. どのスタイルが どの要素にマッチ？
25. 位置関係を全て計算
26. ピクセル単位で書き込み
27. ページのパーツを 組み合わせて、 実際に表示
28. 処理は少ないほうが パフォーマンス、ヨシ！
29. CSSプロパティに変化があった場合 どの処理から発生するのか？ Q @rabspice
30. プロパティによって違う A @rabspice
31. https://csstriggers.com/ @rabspice
32. transform top,right bottom,left margin padding @rabspice
33. top,right bottom,left margin padding
34. transform
35. transform 負荷、低い！
36. 見た目上同じ動きを作っても 発生する処理が異なる。 @rabspice
37. どんな処理が発生したか確認(Chrome) 「Rendering」タブで確認ができる @rabspice みてね！
38. 結論
39. CSSでアニメーション作る時は。 @rabspice transform
40. CSSでアニメーション作る時は。 @rabspice transform opacity
41. なぜ なら
42. @rabspice
43. More Infomation @rabspice Rendering Performance https://developers.google.com/web/fundament als/performance/rendering
44. Thank you ! @rabspice