CSS3 for tomorrow [ver.LP9]

高津戸 壮（たかつど・たけし）

株式会社ピクセルグリッド
フロントエンドエンジニア

（GoogleChromeのみ）
http://goo.gl/O9ua
http://goo.gl/TRbO

＃秀丸HTMLコーディングの話などが超ためになる
　http://gyauza.egoism.jp/clip　のひとです。

HTMLCSSコーディングJSによるUI実装
＃おお！

CSS　TransitionsModule　Lvel3
CSS　２D　Transforms　Modle　Levwl3
Animation

アップルが提案しているものがほとんど
Chrome　Safariでしかみられない

CSS内にweb-kit の独自実装を設定
スライドもCSSでつくる

Trainsition
「値の変化がおこるときにアニメーションをつけることができる」
例：マウスオーバーで背景色が変化　＋　transition
→「１秒かけて色がかわる」

classにも適用できる
画像サイズ変化：犬のダイエット

例：文字サイズセレクト
アニメーションでナチュラルに変化
「何がおこっているか」わかりやすい

サブメニューアコーディオン展開
・透明度０→１
・左位置：右へイン
・高さ：０から

CSSだけで手軽にアニメーション

Transforms
位置が移動する
倍率の変化
回転
平行四辺形変化

→transitionと組み合わせる
かんたんに超人ワザ！

JSもAS3もいらない

・本背表紙取り出しナビ
・かっこいい階段メニュー展開
・花咲ポップアップ

要素の配置が自由自在に

Animations

ハトがふるえている…！！
CSSでアニメーションを定義
定義したアニメーションを指定するだけ

Demo

fademenu：下からほんわり現れる
galally：JSで0.1秒おきにimg作成：使うときは読み込み済みをかくにんしてから
tagfall：つけっぱだとフリーズする　バラバラになるようにアニメ時間をJSでdurationをランダムにしている

JavaScriptとCSSアニメーション

jQueryでもアニメーションできるし…　：箱が横に移動する
→じつは裏では原始的に1pxずつCSSをずらしている　→重くなりやすい
単純にかけるけど裏ではいろいろがんばってる
CSSとJS両方書かないといけない
キーフレームアニメーションは大変
長いスクリプトの中にアニメーションがあると複雑さ増大
CSSアニメーションなら、一時停止や再生も簡単

→CSS3で自由で管理性のたかいアニメーションが可能

アニメーションとのつきあいかた
「でしゃばらないアニメーション」unobtrusive　animation
Eメールのバリデーションアニメ：間違っているとぶるぶるっとふるえる「通知」の意味
現実には一瞬で切り替わる事物はない

素敵なUIを素敵なCSSアニメーションで

＜感想＞
Flashでいいだろー！と思ってたけど、CSS3便利！（ChromeとSafariでしか見られないけど。。）
アニメーションの動きの計算原理はActionScriptと同じ感じ（残りの距離の半分ずつ近づく）ですね。