冷 し 中 華 は じ め ま し た Ｃ Ｓ Ｓ ア ニ メ シ ョ ン ⼆ 〇 ⼀ 六 年 六 ⽉ ⼀ 〇 ⽇ も り て つ

⾃⼰紹介 u 名前：もりてつ u 年齢：４４歳 u 以前のお仕事：某電機メーカーでソフトウェア関連 ソフトウェアメーカー u 今のお仕事：株式会社グラッドキューブ（2015年11⽉〜） 主にフロントエンド回りを担当 u Twitter：@m_n_t_p u しゅみ：コントラバスとかゲームとかパズルとか。

グラッドキューブ⼊社前まで u HTML/CSS/JavaScriptは仕事でゴリゴリ書いていた u しかし、商品⽤や業務⽤中⼼ u しかもテキストエディタでソースをそのまま書いていた ⇒アニメーションとは無縁の世界

グラッドキューブ⼊社以降のお仕事 u グラッドキューブ公式サイト (2016年1⽉リニューアル) https://www.glad-cube.com/ u SiTest (2016年5⽉リニューアル) https://sitest.jp/ ⇒各サイトでアニメーションを作成

フロントエンド担当メンバー Mさん(今⽉三⼗路) 取りまとめ役、フロントエンド以外も⾊々こなす Wくん 関⻄フロントエンドUGでお馴染みの若⼿ もりてつ グラッドキューブに⼊りたての新⼈ (ただし40代)

フロントエンドでのアニメーション CSS アニメーション jQuery animate • 昔からある • 汎⽤的 • だけど遅い • CSS3で登場 • なかなか速い Velocity.js • 爆速、らしい • 社内⼈気上昇中 どれを 使うか？

CSSアニメーション (transformとかtransitionとかanimationとか) メリット デメリット とっつきやすい CSS3に対応していればスマホでも動く jQuery.animateよりは速い コードが⻑くなりがち 動かせるプロパティが限られている

CSSアニメーション 例えばどんなものがあるのか？

CSSアニメーション 例えばどんなものがあるのか？ CSSアニメーション サンプル 検索

フロントエンドでのアニメーション CSS アニメーション jQuery animate Velocity.js 場⾯に応じて 使いやすいものを選び 使い分けていく 結局

フロントエンドでのアニメーション CSS アニメーション jQuery animate Velocity.js 今後は…… この2つを併⽤？

何はともあれ 今後も アニメーションを ゴリゴリ作っていきます

ご清聴 ありがとうございました。