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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

どうやって動かすの？

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

(1) transition

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

(2) animation

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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); } 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倍くらい …

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

メリット • jQueryアニメーションより処理理が軽い（場合もある） • 柔軟にアニメーションが記述できる • JavaScriptが書けない⼈人でもアニメーションが実装できる • デザインとUIアニメーションを同じCSSに書く事ができるので、実装や修正がしやすい CSSアニメーションのメリット・デメリット

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

いい！（場合もある）ブラウザのJavaScript エンジンが何なのかとか JavaScriptの書き⽅方とかにもよるし CSS側もどんなプロパティで動かしてるのかとか動かす対象にどんだけプロパティ積まれてるのかとかアニメーション以外で動いているJavaScriptがどんだけあるのかとかまぁでもシンプルなアニメーションなら CSSの⽅方が速い！

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

⼤大丈夫！そもそもシンプルなアニメーションなら動いても動かなくても動作に⽀支障ないっていうかそういう箇所に使えばいいよね／ IE8とか7とか頑張る必要そろそろ無くない？まぁクリティカルな動作はともかくアニメーションだよ？デザイナーはプログレッシブエンハンスメント！を唱えた！ケースバイケースで使い所を考えれば⼤大丈夫！

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

• CSS3で登場したプロパティ（特にtransitionとか animationとか）を使うと、今までJavaScriptでしかできなかったアニメーションがCSSでも可能に！ • 簡単なアニメーションなら、CSS3で書いた⽅方がパフォーマンスがいい！ • JavaScriptと上⼿手く共存させると、デザイン修正がしやすくなる！ • あと、タイトルに「脱JavaScript!」ってつけましたが、脱するつもりはありませんごめんなさいまとめ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ありがとうございました