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

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

sizucca
June 24, 2015
Design
0
50

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

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

sizucca

June 24, 2015
Tweet

More Decks by sizucca

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

Other Decks in Design

See All in Design
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
680
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
620
アフォーダンスとシグニファイア
ryokanakai
0
300
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Night Shift (beginning sequence)
cpineda57
0
870
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
440
なぜデフォルトが青色！？ Tint Colorの理由に迫る
akidon0000
0
430
Kim Possible - Crush
olgastoryboard
0
130
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Code Review Best Practice
trishagee
64
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Scaling GitHub
holman
458
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
A better future with KSS
kneath
238
17k

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. ありがとうございました