HTML5飯でCSSアニメーションの話をしました。

1. HTML5飯
2014.10.11

2. はじめまして

3. 月田小百合(una*)
http://www.kayac.com/team/tsukida-sayuri
https://twitter.com/unachang113
http://jsdo.it/mermaid1112/

4. マツモトキヨシpresents イケメンビューティーサロン
http://cp.matsukiyo.co.jp/ikemen/

5. IRroid
http://ir-roid.com/

6. テトラパックほんねマーチ
http://www.honnemarch.com/

7. 決意の大円陣
http://campaign-dena.com/special/

8. 突然ですが質問です

10. javascript、
20行しか書いてません

12. javascript、
1行も書いてません

13. javascript書くの
そんなに得意じゃない

14. 少ないコードで豊かな表現
これが私のシンデレラHTML

15. 少ない工数で豊かな表現！！
これが私のCSSアニメーション

16. CSSアニメーション
利点
手軽に実装できる
keyframesを使えば細かな指定も可能
transition,animationの終了タイミングも取れる
欠点
IE9以下で使えない
パスアニメーションのような複雑な動きは出来ない

18. 円陣、集中線
Animationのstepsプロパティで実現
http://jsdo.it/mermaid1112/8wqV

19. 街が引いて行く部分
transform:scaleで実現
アニメーションを実行させたいタイミングでclassを追加

20. アニメーションの連結
transitionend,animationEndイベントを利用
まだprefixが取れてないので利用する時は注意

21. 例えばdelayを使うと
テキストのアニメーション場面転換
やっぱりテキストのアニメー
ションの秒数を増やしたい
場面転換の待ち時間も増やさ
ないといけない

22. イージングどうすんの？

23. EasingFunction 早見表
http://easings.net/ja#

24. Keyframes設定めんどい

25. CSS3 Animation Cheat Sheet - Justin Aguilar
http://www.justinaguilar.com/animations/

26. まとめ
javascriptを使わなくてもアニメーションは手軽に実装で
きる
みなさんも楽しいCSSライフを！！！！！