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
"いい感じ"にするためのイージング
Search
448jp | OKI Yoshiya
July 27, 2018
Technology
1
1.4k
"いい感じ"にするためのイージング
Meguro.css #2 LT発表資料
448jp | OKI Yoshiya
July 27, 2018
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
書く・即・DONEな仕組みをNuxtで作る
448jp
0
300
神速でワイヤーフレームを作るためのライブラリ
448jp
1
770
Figmaで神速ドキュメント作成術
448jp
3
2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
350
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
690
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
240
Lottieで始めるWebアニメーション入門
448jp
1
560
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.2k
Other Decks in Technology
See All in Technology
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
150
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
170
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
Lambdaと地方とコミュニティ
miu_crescent
2
370
Platform Engineering for Software Developers and Architects
syntasso
1
520
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
A better future with KSS
kneath
238
17k
How to Ace a Technical Interview
jacobian
276
23k
The Language of Interfaces
destraynor
154
24k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Happy Clients
brianwarren
98
6.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Transcript
2018.7.27 (Fri) Meguro.css #2 @ oRo "いい感じ" にするための イージング 世路庵
沖 良矢
沖 良矢 ◉ 世路庵 ◉ フリーランス10年目 ◉ インタラクションデザイナー @448jp おき
よしや
アニメーションの 実装における指示例
アニメーションツール? コンテ? 参考サイト? Webサービス?
個人的に一番多いのは……
"いい感じ"に してください
"いい感じ"is 何
美しさを備える メンテナンス性が高い "いい感じ"のアニメーションとは 好さ ユーザー/ビジネス課題を解決する あるべき姿を表す 善さ 参考:「FLASHerがこの先生きのこるには」https://qiita.com/alumican_net/items/f21170d68a686e59eab2 +
作ってみたけど、"いい感じ"にならない……
原因の90%は イージング です (個人の感想)
「なんか違う」ときは、 イージング>時間>対象 の順で調整するとうまくいく (個人の感想)
CSS Transitionsにおけるイージング指定 .box { opacity: 1; transition: 0.4s ease-out; &:hover
{ opacity: 0.4; } }
transition-timing-functionの値 • ease • linear • ease-in • ease-out •
ease-in-out • cubic-bezier() ハッキリ言って少なすぎ
デモ (イージングの違い)
Robert Pennerのイージング関数
cubic-bezier() によるイージングの拡張 .box { opacity: 1; transition: 0.4s cubic-bezier(0.645, 0.045,
0.355, 1); &:hover { opacity: 0.4; } }
Sassの変数で使い回し $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1); .box { opacity: 1;
transition: 0.4s $easeInOutCubic; &:hover { opacity: 0.4; } }
cubic-bezier.comで独自イージング
まとめ Conclusion
CSSのイージングは cubic-bezier()で 初めて真価を発揮する
目先の好さだけに囚われず その先の善さと両立する アニメーションを意識しよう
ありがとうございました 沖 良矢 @448jp