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

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

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

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

もりてつ

June 10, 2016
Tweet

More Decks by もりてつ

Other Decks in Technology

Transcript


































  1. View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide