CSSアニメーション はじめました。

2016/6/10の「Sketchy Talks #1 CSSについて学ぶ」で発表した時のスライドです。
……グダグダですみません(；´∀｀)

Transcript

1. 冷 し 中 華 は じ め ま し た Ｃ Ｓ Ｓ ア ニ メ シ ョ ン ⼆ 〇 ⼀ 六 年 六 ⽉ ⼀ 〇 ⽇ も り て つ
2. ⾃⼰紹介 u 名前：もりてつ u 年齢：４４歳 u 以前のお仕事：某電機メーカーでソフトウェア関連 ソフトウェアメーカー u 今のお仕事：株式会社グラッドキューブ（2015年11⽉〜） 主にフロントエンド回りを担当 u Twitter：@m_n_t_p u しゅみ：コントラバスとかゲームとかパズルとか。
3. グラッドキューブ⼊社前まで u HTML/CSS/JavaScriptは仕事でゴリゴリ書いていた u しかし、商品⽤や業務⽤中⼼ u しかもテキストエディタでソースをそのまま書いていた ⇒アニメーションとは無縁の世界
4. グラッドキューブ⼊社以降のお仕事 u グラッドキューブ公式サイト (2016年1⽉リニューアル) https://www.glad-cube.com/ u SiTest (2016年5⽉リニューアル) https://sitest.jp/ ⇒各サイトでアニメーションを作成
5. フロントエンド担当メンバー Mさん(今⽉三⼗路) 取りまとめ役、フロントエンド以外も⾊々こなす Wくん 関⻄フロントエンドUGでお馴染みの若⼿ もりてつ グラッドキューブに⼊りたての新⼈ (ただし40代)
6. フロントエンドでのアニメーション CSS アニメーション jQuery animate • 昔からある • 汎⽤的 • だけど遅い • CSS3で登場 • なかなか速い Velocity.js • 爆速、らしい • 社内⼈気上昇中 どれを 使うか？
7. CSSアニメーション (transformとかtransitionとかanimationとか) メリット デメリット とっつきやすい CSS3に対応していればスマホでも動く jQuery.animateよりは速い コードが⻑くなりがち 動かせるプロパティが限られている
8. CSSアニメーション 例えばどんなものがあるのか？
9. CSSアニメーション 例えばどんなものがあるのか？ CSSアニメーション サンプル 検索
10. フロントエンドでのアニメーション CSS アニメーション jQuery animate Velocity.js 場⾯に応じて 使いやすいものを選び 使い分けていく 結局
11. フロントエンドでのアニメーション CSS アニメーション jQuery animate Velocity.js 今後は…… この2つを併⽤？
12. 何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
13. ご清聴 ありがとうございました。