静岡WEBフロントエンド勉強会 #1

2013年2月2日開催。「CSS2の復習」「レスポンシブWebデザイン」「CSSアニメーション」「CSSの書き方」「canvas」など。
1
michael@運用改善SE 兼業主夫 @creaism

Transformsについて、iOSはOK。アンドロイドは特殊で、へんな挙動をするときがある。 #shizuoka_fe1

2013-02-02 15:47:05
ゃべゃすひと@駆け出したいウェブ制作な人 @yabecchy

.@logicraft さんによるCSS3の解説。とくにアニメーション関係の話。 disられるIEとAndroid2.3 / 4.0。 #shizuoka_fe1

2013-02-02 15:47:09
モチムネ @motimune

translateZ()は3Dメガネをかけないと動作を確認できない #shizuoka_fe1

2013-02-02 15:49:23
モチムネ @motimune

CSS3のアニメーションってすごくぬるぬる動くな。これはすごい #shizuoka_fe1

2013-02-02 15:52:24
michael@運用改善SE 兼業主夫 @creaism

skew(スキュー)の回転角度指定も、degで! #shizuoka_fe1

2013-02-02 15:53:52
tomof @tomof

#shizuoka_fe1 Q:skewはなんて読むのか? A:スキュー(多分)

2013-02-02 15:54:07
michael@運用改善SE 兼業主夫 @creaism

初期値から目的の状態へと遷移。一回だけ動かす。開始するにはイベントが必要。イベントが終わると逆戻りする。 #shizuoka_fe1

2013-02-02 15:57:14
michael@運用改善SE 兼業主夫 @creaism

アニメーションさせる2つの方法。 ・hoverなどの議事クラス。 ・Javascriptを使用して(ry #shizuoka_fe1

2013-02-02 15:58:09
michael@運用改善SE 兼業主夫 @creaism

JSでごりごりやってた事が、比較的シンプルに実装できそうな予感。あくまで、予感。 #shizuoka_fe1

2013-02-02 15:59:48
tomof @tomof

#shizuoka_fe1 イージングが何たるかはここを見ると分かりやすいです。http://t.co/eChhzOQN

2013-02-02 16:00:23
michael@運用改善SE 兼業主夫 @creaism

transition-timing-functionには、デフォルトで動くキーワードが用意されている。(?) #shizuoka_fe1

2013-02-02 16:00:38
michael@運用改善SE 兼業主夫 @creaism

おぉ、コード来た!シンプル・シンプル!! #shizuoka_fe1

2013-02-02 16:02:02
michael@運用改善SE 兼業主夫 @creaism

Animation ・キーフレームで細かい指定可 ・ループや回数指定が可能 ・開始は要素の描画と同時 ・状態維持が可能(!) #shizuoka_fe1

2013-02-02 16:05:21
michael@運用改善SE 兼業主夫 @creaism

Animation アットkeyframes は、ベンダープレフィックスが必須! #shizuoka_fe1

2013-02-02 16:08:20
ゃべゃすひと@駆け出したいウェブ制作な人 @yabecchy

ちなみに散々にdisられてるIEのCSS3対応ですが、IE10からはアニメーション系もサポートされてます。 #shizuoka_fe1

2013-02-02 16:09:28
michael@運用改善SE 兼業主夫 @creaism

@planpot さんの、(LT)LESSやSassが使えない時のplanpot流CSS整理術 はじまりました! #shizuoka_fe1

2013-02-02 16:20:51