Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSSアニメーション はじめました。
もりてつ
June 10, 2016
Technology
0
72
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
610
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
180
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
140
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
110
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
140
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
670
単位をあやつる
m_n_t_p
2
600
グリッドレイアウト これまでとこれから
m_n_t_p
1
490
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
660
Other Decks in Technology
See All in Technology
様々な現場のPower Platform ~小さなエンジニアの奮闘記~
hyodol2513
0
1.7k
TypeScript 4.7と型レベルプログラミング
uhyo
5
2.9k
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
310
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
310
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
380
Adopting Kafka for the #1 job site in the world
ymyzk
1
260
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
180
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
110
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.4k
Who owns the Service Level?
chaspy
5
710
Power BIのモバイルと都 +1 / Tokyo
ishiayaya
0
130
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Optimizing for Happiness
mojombo
365
63k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
How to Ace a Technical Interview
jacobian
265
21k
Designing Experiences People Love
moore
130
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Facilitating Awesome Meetings
lara
29
3.9k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。