1. ∼ ∼
CSSアニメーションと
その制御について
Creators MeetUp
第3回

2. 自己紹介
名前
所属
職種
tw
FB
Blog
Mail
藤田 無憂
フリーランス
ディレクター
フロントエンドエンジニア
IT僧侶
@anticyborg
muyuu
http://stackstock.net/
anticyborg@gmail.com

3. 覚えたアビリティ
フロントエンド
端末対応
レスポンシブWebデザイン
サーバサイド
スマートフォン用サイト・Webアプリ

4. 今日のお話
•Webとアニメーション
•CSSアニメーションとは
•CSSアニメーションの種類
•制御する方法

5. Webとアニメーション

6. Webとアニメーション
•今まではアニメーションと言えばFlash
•Appleの「Flashいらね」宣言でみんな大変
•「javascriptがあるじゃないか！」

7. JQueryで割と簡単にできる
•記述が簡単
•デザイナーフレンドリー

8. Javascriptのアニメーションは重い
元々アニメーションの機能があるわけではない
ので、割と強引な手法で動かしてたりします。

9. Javascriptのアニメーションは重い
元々アニメーションの機能があるわけではない
ので、割と強引な手法で動かしてたりします。
そこでCSSですよ！

10. DEMO
http://stackstock.net/demo/cmu0427/d06.html

11. CSSアニメーションとは

12. cssアニメーションとは
•Level3(通称css3)で機能が追加された
•ブラウザネイティブなので軽快な動作
Javascriptはアニメーション機能を持っているわけではないので
基本的には処理が重くなりがち
IEは(いつものように)未対応
•対応ブラウザは微妙

13. そんな感じでスマートフォンサイト、
Webアプリのアニメーションにはcss
が採用されるケースが多くなってきて
います。

14. cssアニメーションの種類

15. cssアニメーションの種類
•transitionプロパティ
:hover等の特定のアクションに対しての要素の変化をアニメーション
させるプロパティ。アクション終了時には逆のアニメーションで戻る
要素の変化に対して
アニメーションをつける

16. DEMO
http://stackstock.net/demo/cmu0427/d01.html

17. transitionプロパティ
•transition-property
•transition-duration
どの要素に対してアニメーションをさせるか
アニメーションにかける時間
•transition-delay
アニメーションを開始するまでの遅延時間
•transition-timing-function
どんなタイミングでどんな速度でアニメーションさせるか(イージング)

18. cssアニメーションの種類
•animationプロパティ
キーフレームを使ってFlashのように柔軟に要素をアニメーションさ
せるプロパティ。
タイムライン的な
アニメーションができる

19. DEMO
http://stackstock.net/demo/cmu0427/d02.html

20. animationプロパティ
•animation-name
•animation-duration
実行するアニメーションの名前(@keyframes の名前)
アニメーションにかける時間
•animation-delay
アニメーションを開始するまでの遅延時間
•animation-iteration-count
何回アニメーションを繰り返すか

21. animationプロパティ
•animation-direction
•animation-play-state
アニメーションの再生方向
一時停止したり再開したり
•animation-timing-function
どんなタイミングでどんな速度でアニメーションさせるか(イージング)
•animation-fill-mode
アニメーション実行後の振る舞いをどうするか

22. アニメーションの制御

23. クリックでアニメーションを開始
http://stackstock.net/demo/cmu0427/d03.html

24. アニメーション終了後に次の
アニメーションを開始
http://stackstock.net/demo/cmu0427/d04.html

25. さっきのDEMOを修正して、何度で
もクリックに反応する子に調教
http://stackstock.net/demo/cmu0427/d03.5.html

26. 最後にデモっぽいやつを
http://stackstock.net/demo/cmu0427/d05.html

27. 今のところ、cssアニメーション
は全部手書きで動きも秒数も指定
しないといけない
めんどくさいっ！！

28. cssアニメーションの課題
•端末、ブラウザの対応には延々悩まされる
•オーサリングツールがない

29. 時が解決して
くれるよきっと
例えばこの子とか…きっと…

30. 今はきっと、
基礎力を養う時期

31. がんばろうぜ！

32. ありがとうございました