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

脱JavaScript！ CSSで作るアニメーション

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for sizucca sizucca
June 24, 2015
Design
0
76

脱JavaScript！ CSSで作るアニメーション

社内勉強会LTで「CSS3 のプロパティ transition と animation でのアニメーションの作り方」を話した時のスライド。

Avatar for sizucca

sizucca

June 24, 2015
Tweet

More Decks by sizucca

See All by sizucca
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
Avatar for sizucca sizucca
5
6.7k
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
Avatar for sizucca sizucca
2
2.9k
アンドパッドのデザインシステムの今までとこれから
Avatar for sizucca sizucca
4
3.9k
PowerPointのここがスゴイ！！
Avatar for sizucca sizucca
0
200
スライド資料のデザインシステムをつくっている話
Avatar for sizucca sizucca
0
100
UXデザインを組織に導入する
Avatar for sizucca sizucca
0
120
社内のプロダクト開発でデザインスプリントを実践して分かったこと
Avatar for sizucca sizucca
0
89
効果測定の効率化のために行った3つのこと
Avatar for sizucca sizucca
0
79

Other Decks in Design

See All in Design
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
820
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
350
Treasure_Hunting
Avatar for Sol Metts solmetts
0
320
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.1k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
2.9k
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
150
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
550
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
390
第18回サイゼミ
Avatar for LW lw
1
3.6k

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
980
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
550
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
830
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
180
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
220
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k

Transcript

  1. 脱 JavaScript！ CSSで作るアニメーション 2015/06/24 @sizucca

  2. UI Designer @sizucca or @sizucca_̲ ⾃自⼰己紹介

  3. どうやって動かすの？

  4. (1) transition (2) animation どうやって動かすの？ ➡ 簡単なアニメーション ➡ 複雑なアニメーション

  5. (1) transition

  6. transition 始点と終点 2点間のデザインを アニメーションで変化させる事ができる 始点 終点

  7. transition <body> <img class="giraffe" src="images/giraffe.png" width="400" height="688" alt=“”> </body> .giraffe

    { position: relative; top: 20px; left: 20px; opacity: 0.3; -webkit-transition: 4s all ease 2s; transition: 4s all ease 2s; } .giraffe:hover { left: 1000px; opacity: 1; }

  8. transition .giraffe { position: relative; top: 20px; left: 20px; opacity:

    0.3; -webkit-transition: 4s all ease 2s; transition: 4s all ease 2s; } .giraffe:hover { left: 1000px; opacity: 1; } top: 20px left: 20px opacity: 0.3

  9. transition .giraffe { position: relative; top: 20px; left: 20px; opacity:

    0.3; -webkit-transition: 4s all ease 2s; transition: 4s all ease 2s; } .giraffe:hover { left: 1000px; opacity: 1; } top: 20px left: 20px opacity: 0.3 再⽣生時間 プロパティ 補間⽅方法 ディレイ

  10. transition .giraffe { position: relative; top: 20px; left: 20px; opacity:

    0.3; -webkit-transition: 4s all ease 2s; transition: 4s all ease 2s; } .giraffe:hover { left: 1000px; opacity: 1; } left: 1000px opacity: 1

  11. transition .giraffe { position: relative; top: 20px; left: 20px; opacity:

    0.3; -webkit-transition: 4s all ease 2s; transition: 4s all ease 2s; } .giraffe:hover { left: 1000px; opacity: 1; } left: 1000px opacity: 1 left: 20px 始点 終点

  12. (2) animation

  13. キーフレームを利利⽤用したアニメーションが設定できる キーフレームは アニメーションで変化させたいデザインを、 始点と終点 の間に複数設定する事ができる animation 12.5% 25% 37.5% 50%

    87.5% 75% 62.5% 始点:0% 終点:100%

  14. animation <body> <img class="bee" src=“images/bee.png" width="120" height="120" alt=“”> </body> .bee

    { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation: guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); } 50% { top: 2em; left: 0; -webkit-transform: rotate(270deg); transform: rotate(270deg); } 62.5% { top: 1.42em; left: -1.42em; -webkit-transform: rotate(315deg); transform: rotate(315deg); } 75% { top: 0; left: -2em; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 87.5% { top: -1.42em; left: -1.42em; -webkit-transform: rotate(405deg); transform: rotate(405deg); } 100% { top: -2em; left: 0; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } ×2倍くらい …

  15. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); } margin: 2.5em 1em = 80px 2.5em = 200px

  16. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } top: -1.42em; … 100% { top: -2em; left: 0; -webkit-transform: rotate(450deg); transform: rotate(450deg);

  17. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); }

  18. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); }

  19. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); }

  20. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } top: -1.42em; … 100% { top: -2em; left: 0; -webkit-transform: rotate(450deg); transform: rotate(450deg);

  21. animation .bee { position: relative; margin: 2.5em; font-size: 80px; -webkit-animation:

    guruguru 1s linear infinite; animation: guruguru 1s liner infinite; } @-webkit-keyframes guruguru { 0% { top: -2em; left: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 12.5% { top: -1.42em; left: 1.42em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { top: 0; left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 37.5% { top: 1.42em; left: 1.42em; -webkit-transform: rotate(225deg); transform: rotate(225deg); } キーフレーム名 再⽣生時間 補間⽅方法 繰り返し

  22. CSSアニメーションの メリット・デメリット

  23. メリット • jQueryアニメーションより処理理が軽い（場合もある） • 柔軟にアニメーションが記述できる • JavaScriptが書けない⼈人でもアニメーションが 実装できる • デザインとUIアニメーションを同じCSSに書

    く事ができるので、実装や修正がしやすい CSSアニメーション の メリット・デメリット

  24. デメリット • clickイベントなどをトリガーにする事ができ ない（JavaScriptの助けが必要） • トリガーなどが書かれたJavaScriptと、アニ メーションが書かれたCSSが別管理理になる • コードの量量が多くなりがち •

    すごく複雑なアニメーションはまだ難しい CSSアニメーション の メリット・デメリット

  25. 本当にJavaScriptより パフォーマンスいいの？

  26. いい！ （場合もある） ブラウザのJavaScript エンジンが何なのかとか JavaScriptの書き⽅方とか にもよるし CSS側もどんなプロパティ で動かしてるのかとか 動かす対象にどんだけ プロパティ積まれてる

    のかとか アニメーション以外で 動いているJavaScriptが どんだけあるのかとか まぁでも シンプルなアニメーションなら CSSの⽅方が速い！

  27. クロスブラウザ対応とか ⼤大丈夫なの？

  28. ⼤大丈夫！ そもそもシンプルな アニメーションなら動いても 動かなくても動作に⽀支障ない っていうかそういう箇所に 使えばいいよね／ IE8とか7とか頑張る必要 そろそろ無くない？ まぁクリティカルな動作は ともかくアニメーションだよ？

    デザイナーは プログレッシブ エンハンスメント！ を唱えた！ ケースバイケースで 使い所を考えれば ⼤大丈夫！

  29. まとめ

  30. • CSS3で登場したプロパティ（特にtransitionとか animationとか）を使うと、今までJavaScriptでし かできなかったアニメーションがCSSでも可能に！ • 簡単なアニメーションなら、CSS3で書いた⽅方がパ フォーマンスがいい！ • JavaScriptと上⼿手く共存させると、デザイン修正 がしやすくなる！

    • あと、タイトルに「脱JavaScript!」ってつけましたが、脱するつもりはありませんごめんなさい まとめ

  31. エンジニアさんへ • CSSは（デザインとか考えずにプロパティだけ ⾒見見れば）怖くないよ！ デザイナーさんへ • 簡単なjQuery（classの付け外しだけとか）な らそんなに怖くないよ！ 最後に

  32. ありがとうございました