第3回 html5飯 少ない工数で豊かな表現!これが私のcssアニメーション
DESCRIPTION
HTML5飯でCSSアニメーションの話をしました。TRANSCRIPT
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ライフを!!!!!