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
82
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
870
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
390
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
260
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
130
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
150
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
920
単位をあやつる
m_n_t_p
2
790
グリッドレイアウト これまでとこれから
m_n_t_p
1
700
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
820
Other Decks in Technology
See All in Technology
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
Building Dashboards as a Hobby
egmc
0
220
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
320
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.4k
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
700
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
310
DMM.com アルファ室採用案内資料
hsugita
1
140
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Docker and Python
trallard
34
2.7k
Product Roadmaps are Hard
iamctodd
44
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Rails Girls Zürich Keynote
gr2m
91
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Web development in the modern age
philhawksworth
202
10k
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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。