Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSアニメーション はじめました。
Search
もりてつ
June 10, 2016
Technology
0
86
CSSアニメーション はじめました。
2016/6/10の「Sketchy Talks #1 CSSについて学ぶ」で発表した時のスライドです。
……グダグダですみません(;´∀`)
もりてつ
June 10, 2016
Tweet
Share
More Decks by もりてつ
See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
990
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
510
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
340
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
160
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
900
グリッドレイアウト これまでとこれから
m_n_t_p
1
880
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
920
Other Decks in Technology
See All in Technology
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Faster Mobile Websites
deanohume
306
31k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Six Lessons from altMBA
skipperchong
27
3.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Become a Pro
speakerdeck
PRO
26
5.1k
Transcript
冷 し 中 華 は じ め ま し た
C S S ア ニ メ シ ョ ン ⼆ 〇 ⼀ 六 年 六 ⽉ ⼀ 〇 ⽇ も り て つ
⾃⼰紹介 u 名前:もりてつ u 年齢:44歳 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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。