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
89
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
520
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
350
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
150
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
170
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
910
グリッドレイアウト これまでとこれから
m_n_t_p
1
900
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
930
Other Decks in Technology
See All in Technology
手を動かしてレベルアップしよう!
maruto
0
270
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
160
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
130
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
280
事業を差別化する技術を生み出す技術
pyama86
2
560
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.9k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
890
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
520
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
x86-64 Assembly Essentials
latte72
4
700
LangGraph × Bedrock による複数の Agentic Workflow を利用した Supervisor 型のマルチエージェントの実現/langgraph-bedrock-supervisor-agent
ren8k
2
180
きのこカンファレンス_ランチスポンサーセッション
kabaya
0
140
Featured
See All Featured
Building an army of robots
kneath
303
45k
Why Our Code Smells
bkeepers
PRO
336
57k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Music & Morning Musume
bryan
46
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
4 Signs Your Business is Dying
shpigford
183
22k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Adopting Sorbet at Scale
ufuk
75
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。