Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

0fdc62ee683c65e17f2a90728570f455?s=128

もりてつ

June 10, 2016
Tweet

More Decks by もりてつ

Other Decks in Technology

Transcript

  1. 冷 し 中 華 は じ め ま し た

    C S S ア ニ メ シ ョ ン ⼆ 〇 ⼀ 六 年 六 ⽉ ⼀ 〇 ⽇ も り て つ
  2. ⾃⼰紹介 u 名前:もりてつ u 年齢:44歳 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. ご清聴 ありがとうございました。