Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
脱JavaScript！ CSSで作るアニメーション
Search
sizucca
June 24, 2015
Design
0
67
脱JavaScript！ CSSで作るアニメーション
社内勉強会LTで「CSS3 のプロパティ transition と animation でのアニメーションの作り方」を話した時のスライド。
sizucca
June 24, 2015
Tweet
Share
More Decks by sizucca
See All by sizucca
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
sizucca
5
6.3k
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
2.8k
アンドパッドのデザインシステムの今までとこれから
sizucca
4
3.7k
PowerPointのここがスゴイ！！
sizucca
0
160
スライド資料のデザインシステムをつくっている話
sizucca
0
84
UXデザインを組織に導入する
sizucca
0
110
社内のプロダクト開発でデザインスプリントを実践して分かったこと
sizucca
0
76
効果測定の効率化のために行った3つのこと
sizucca
0
65
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
410
Kid Cowboy 103
marilutwin
0
300
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
250
Cyber Heart Online Book
hjnasby
0
160
Installing and Running decksh/pdfdeck
ajstarks
1
830
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.5k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.4k
AI動画生成ガチャ紹介
piyo7
1
200
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
ka71
0
160
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
bpstudy
0
600
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
470
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Scaling GitHub
holman
462
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Typedesign – Prime Four
hannesfritz
42
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Writing Fast Ruby
sferik
628
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
脱 JavaScript！ CSSで作るアニメーション 2015/06/24 @sizucca
UI Designer @sizucca or @sizucca_̲ ⾃自⼰己紹介
どうやって動かすの？
(1) transition (2) animation どうやって動かすの？ ➡ 簡単なアニメーション ➡ 複雑なアニメーション
(1) transition
transition 始点と終点 2点間のデザインを アニメーションで変化させる事ができる 始点 終点
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; }
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
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 再⽣生時間 プロパティ 補間⽅方法 ディレイ
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
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 始点 終点
(2) animation
キーフレームを利利⽤用したアニメーションが設定できる キーフレームは アニメーションで変化させたいデザインを、 始点と終点 の間に複数設定する事ができる animation 12.5% 25% 37.5% 50%
87.5% 75% 62.5% 始点:0% 終点:100%
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倍くらい …
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
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);
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); }
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); }
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); }
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);
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); } キーフレーム名 再⽣生時間 補間⽅方法 繰り返し
CSSアニメーションの メリット・デメリット
メリット • jQueryアニメーションより処理理が軽い（場合もある） • 柔軟にアニメーションが記述できる • JavaScriptが書けない⼈人でもアニメーションが 実装できる • デザインとUIアニメーションを同じCSSに書
く事ができるので、実装や修正がしやすい CSSアニメーション の メリット・デメリット
デメリット • clickイベントなどをトリガーにする事ができ ない（JavaScriptの助けが必要） • トリガーなどが書かれたJavaScriptと、アニ メーションが書かれたCSSが別管理理になる • コードの量量が多くなりがち •
すごく複雑なアニメーションはまだ難しい CSSアニメーション の メリット・デメリット
本当にJavaScriptより パフォーマンスいいの？
いい！ （場合もある） ブラウザのJavaScript エンジンが何なのかとか JavaScriptの書き⽅方とか にもよるし CSS側もどんなプロパティ で動かしてるのかとか 動かす対象にどんだけ プロパティ積まれてる
のかとか アニメーション以外で 動いているJavaScriptが どんだけあるのかとか まぁでも シンプルなアニメーションなら CSSの⽅方が速い！
クロスブラウザ対応とか ⼤大丈夫なの？
⼤大丈夫！ そもそもシンプルな アニメーションなら動いても 動かなくても動作に⽀支障ない っていうかそういう箇所に 使えばいいよね／ IE8とか7とか頑張る必要 そろそろ無くない？ まぁクリティカルな動作は ともかくアニメーションだよ？
デザイナーは プログレッシブ エンハンスメント！ を唱えた！ ケースバイケースで 使い所を考えれば ⼤大丈夫！
まとめ
• CSS3で登場したプロパティ（特にtransitionとか animationとか）を使うと、今までJavaScriptでし かできなかったアニメーションがCSSでも可能に！ • 簡単なアニメーションなら、CSS3で書いた⽅方がパ フォーマンスがいい！ • JavaScriptと上⼿手く共存させると、デザイン修正 がしやすくなる！
• あと、タイトルに「脱JavaScript!」ってつけましたが、脱するつもりはありませんごめんなさい まとめ
エンジニアさんへ • CSSは（デザインとか考えずにプロパティだけ ⾒見見れば）怖くないよ！ デザイナーさんへ • 簡単なjQuery（classの付け外しだけとか）な らそんなに怖くないよ！ 最後に
ありがとうございました
sizucca
takuwolog
marilutwin
crearedesign
hjnasby
ajstarks
taka_piya
nikkei_engineer_recruiting
piyo7
ka71
kitau
bpstudy
lycorptech_jp
iamctodd
cromwellryan
holman
yeseniaperezcruz
sstephenson
hannesfritz
thoeni
michaelherold
cassininazir
mongodb
sferik
pedronauck
