Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

D6f945adcdb855280411201f78c99a2e?s=47 Spice-Z
December 13, 2019

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

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

D6f945adcdb855280411201f78c99a2e?s=128

Spice-Z

December 13, 2019
Tweet

More Decks by Spice-Z

Other Decks in Technology

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