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
68
脱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.4k
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
2.8k
アンドパッドのデザインシステムの今までとこれから
sizucca
4
3.8k
PowerPointのここがスゴイ！！
sizucca
0
170
スライド資料のデザインシステムをつくっている話
sizucca
0
89
UXデザインを組織に導入する
sizucca
0
110
社内のプロダクト開発でデザインスプリントを実践して分かったこと
sizucca
0
77
効果測定の効率化のために行った3つのこと
sizucca
0
65
Other Decks in Design
See All in Design
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
520
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
760
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
fuwarisprit
3
1.6k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
180
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
420
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
580
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
340
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
590
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Language of Interfaces
destraynor
162
25k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Automating Front-end Workflow
addyosmani
1371
200k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Documentation Writing (for coders)
carmenintech
75
5.1k
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
lycorptech_jp
visional_engineering_and_design
fuwarisprit
_psyc0_
loglass2019
hiro93n
crearedesign
samsulrahman32
takanorip
moore
dougneiner
marcelosomers
jlugia
destraynor
hatefulcrawdad
vanstee
addyosmani
thoeni
tammyeverts
jcasabona
carmenintech
