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
91
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
1k
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
550
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
370
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
160
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
180
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
950
グリッドレイアウト これまでとこれから
m_n_t_p
1
960
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
960
Other Decks in Technology
See All in Technology
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
140
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
230
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
690
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.7k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.5k
OpenTelemetry の Log を使いこなそう
biwashi
5
1k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
390
Building GoReleaser - from shell script to paid product
caarlos0
0
280
TROCCO今昔
gtnao
0
210
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
240
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Music & Morning Musume
bryan
46
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Code Reviewing Like a Champion
maltzj
524
40k
The Language of Interfaces
destraynor
158
25k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。