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

脱 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

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 再⽣生時間プロパティ補間⽅方法ディレイ

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

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

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);

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); }

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);

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の付け外しだけとか）ならそんなに怖くないよ！最後に

ありがとうございました

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

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

sizucca

More Decks by sizucca

Other Decks in Design

Featured

Transcript