いいから黙ってアニメーションはCSSで書いておけ

記事内で参照しているリンク
- https://satoshi7190.github.io/CSS-Magic-Circle/
- 作者: https://twitter.com/satoshi7190
- https://codepen.io/takashimelon/pen/bGzxvRz
- https://developer.mozilla.org/ja/docs/Web/CSS/offset-path

Transcript

1. いいから黙ってアニメーションは CSSで書いておけ たかし
2. みなさんCSS書いてますか？
3. 書いてますよね？
4. まさかとは思いますが、 UIライブラリ使ったりしてないですよね？
5. それ、やめてください󰢃
6. CSSが泣いていますよ！！！
7. 󰤇 （みんなの心の中）
8. 冗談はさておき
9. CSSでアニメーション 書きやすくなりましたよね
10. 魔法陣だってCSSだけで作れちゃう 時代ですもんね
11. https://satoshi7190.github.io/CSS-Magic-Circl e
12. 魔法陣は作れなくてもいいんですが
13. ちょっとしたアニメーションは CSSを使いましょう
14. CSSも喜びます
15. 例えば
16. アニメーション後に display: none;を付けたい場合は
17. アニメーションの秒数と同じだけ待ってからJSで クラスを付けたりしていました
18. しかしChrome 116からはアニメーションで displayの値を変更できるようになりました
19. https://codepen.io/takashimelon/pen/bGzxvR z
20. 他にも
21. Scroll-driven Animationsでスクロールと連動す るようなアニメーションが実装できたり
22. @starting-styleでページ読み込み時のスタイル を定義してアニメーションをさせたり
23. offset-pathを使って定義された経路に沿って動 かすようなこともできるようになりました
24. https://developer.mozilla.org/ja/docs/Web/CS S/offset-path
25. また
26. 各イベントでもCSSアニメーションに関する登壇 がされていたりもします
27. 最近だと
28. #朝までマークアップ / めぐろLT（昨日） / Meguro.css（今日）
29. 日々進化しているCSS
30. みなさんもCSSアニメーションで遊びながらCSS を学びましょう！
31. おわり