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
350
ブラウザのシェアと傾向と対策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
910
グリッドレイアウト これまでとこれから
m_n_t_p
1
890
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
920
Other Decks in Technology
See All in Technology
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
120
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
180
Windows の新しい管理者保護モード
murachiakira
0
200
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.8k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
250
クラウドサービス事業者におけるOSS
tagomoris
3
980
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
6
460
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
250
内製化を加速させるlaC活用術
nrinetcom
PRO
2
120
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
78k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Rails Girls Zürich Keynote
gr2m
94
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
A Philosophy of Restraint
colly
203
16k
Building Adaptive Systems
keathley
40
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Site-Speed That Sticks
csswizardry
4
400
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLの誤解/rethinking-graphql
sonatard
68
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つを併⽤?
何はともあれ 今後も アニメーションを ゴリゴリ作っていきます
ご清聴 ありがとうございました。