第3回 html5飯 少ない工数で豊かな表現!これが私のcssアニメーション
DESCRIPTION
HTML5飯でCSSアニメーションの話をしました。TRANSCRIPT
![Page 1: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/1.jpg)
HTML5飯2014.10.11
![Page 2: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/2.jpg)
はじめまして
![Page 3: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/3.jpg)
月田小百合(una*)
http://www.kayac.com/team/tsukida-sayuri
https://twitter.com/unachang113
http://jsdo.it/mermaid1112/
![Page 4: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/4.jpg)
マツモトキヨシ presents イケメンビューティーサロン
http://cp.matsukiyo.co.jp/ikemen/
![Page 5: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/5.jpg)
IRroid
http://ir-roid.com/
![Page 6: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/6.jpg)
テトラパックほんねマーチ
http://www.honnemarch.com/
![Page 7: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/7.jpg)
決意の大円陣
http://campaign-dena.com/special/
![Page 8: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/8.jpg)
突然ですが質問です
![Page 9: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/9.jpg)
![Page 10: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/10.jpg)
javascript、20行しか書いてません
![Page 11: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/11.jpg)
![Page 12: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/12.jpg)
javascript、1行も書いてません
![Page 13: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/13.jpg)
javascript書くのそんなに得意じゃない
![Page 14: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/14.jpg)
少ないコードで豊かな表現これが私のシンデレラHTML
![Page 15: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/15.jpg)
少ない工数で豊かな表現!!これが私のCSSアニメーション
![Page 16: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/16.jpg)
CSSアニメーション
利点
手軽に実装できる
keyframesを使えば細かな指定も可能
transition,animationの終了タイミングも取れる
欠点
IE9以下で使えない
パスアニメーションのような複雑な動きは出来ない
![Page 17: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/17.jpg)
![Page 18: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/18.jpg)
円陣、集中線
Animationのstepsプロパティで実現
http://jsdo.it/mermaid1112/8wqV
![Page 19: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/19.jpg)
街が引いて行く部分
transform:scaleで実現
アニメーションを実行させたいタイミングでclassを追加
![Page 20: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/20.jpg)
アニメーションの連結
transitionend,animationEndイベントを利用
まだprefixが取れてないので利用する時は注意
![Page 21: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/21.jpg)
例えばdelayを使うと
テキストのアニメーション 場面転換
やっぱりテキストのアニメーションの秒数を増やしたい
場面転換の待ち時間も増やさないといけない
![Page 22: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/22.jpg)
イージングどうすんの?
![Page 23: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/23.jpg)
EasingFunction早見表
http://easings.net/ja#
![Page 24: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/24.jpg)
Keyframes設定めんどい
![Page 25: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/25.jpg)
CSS3 Animation Cheat Sheet - Justin Aguilar
http://www.justinaguilar.com/animations/
![Page 26: 第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション](https://reader033.vdocuments.net/reader033/viewer/2022051112/559b68321a28ab877f8b4599/html5/thumbnails/26.jpg)
まとめ
javascriptを使わなくてもアニメーションは手軽に実装できる
みなさんも楽しいCSSライフを!!!!!