Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for takashi takashi
January 20, 2024
Programming
97
0

 いいから黙ってアニメーションは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

Avatar for takashi

takashi

January 20, 2024

More Decks by takashi

See All by takashi
Flutterで実装するCompound Pattern
Avatar for takashi takashimelon
0
83
hanging-punctuation
Avatar for takashi takashimelon
0
46
CustomPainterとAnimationControllerを使用したアニメーション作成
Avatar for takashi takashimelon
0
130
Flutterで作るお絵かきアプリ
Avatar for takashi takashimelon
0
300
Flutter x Socket.IOで行うリアルタイム通信
Avatar for takashi takashimelon
0
450
XDからFigmaに乗り換えた話
Avatar for takashi takashimelon
0
90
webaudioapi.pdf
Avatar for takashi takashimelon
0
44
IT × 音楽 ~Web Audio API~
Avatar for takashi takashimelon
0
84
HTML5.1について
Avatar for takashi takashimelon
0
230

Other Decks in Programming

See All in Programming
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
240
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
570
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
520
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.9k
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
1
410
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.6k
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
130
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
900
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
16k
Verilogで学ぶCPU自作入門
Avatar for uyuki uyuki234
8
4.1k
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
450

Featured

See All Featured
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
680
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
480
Designing for Performance
Avatar for Lara Hogan lara
612
70k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
540
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
700
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
780

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. おわり