第3回 html5飯 少ない工数で豊かな表現！これが私のcssアニメーション

HTML5飯2014.10.11

はじめまして

月田小百合(una*)

http://www.kayac.com/team/tsukida-sayuri

https://twitter.com/unachang113

http://jsdo.it/mermaid1112/

マツモトキヨシ presents イケメンビューティーサロン

http://cp.matsukiyo.co.jp/ikemen/

IRroid

http://ir-roid.com/

テトラパックほんねマーチ

http://www.honnemarch.com/

決意の大円陣

http://campaign-dena.com/special/

突然ですが質問です

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

javascript、1行も書いてません

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

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

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

CSSアニメーション

利点

手軽に実装できる

keyframesを使えば細かな指定も可能

transition,animationの終了タイミングも取れる

欠点

IE9以下で使えない

パスアニメーションのような複雑な動きは出来ない

円陣、集中線

Animationのstepsプロパティで実現

http://jsdo.it/mermaid1112/8wqV

街が引いて行く部分

transform:scaleで実現

アニメーションを実行させたいタイミングでclassを追加

アニメーションの連結

transitionend,animationEndイベントを利用

まだprefixが取れてないので利用する時は注意

例えばdelayを使うと

テキストのアニメーション 場面転換

やっぱりテキストのアニメーションの秒数を増やしたい

場面転換の待ち時間も増やさないといけない

イージングどうすんの？

EasingFunction早見表

http://easings.net/ja#

Keyframes設定めんどい

CSS3 Animation Cheat Sheet - Justin Aguilar

http://www.justinaguilar.com/animations/

まとめ

javascriptを使わなくてもアニメーションは手軽に実装できる

みなさんも楽しいCSSライフを！！！！！