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.3k
"いい感じ"にするためのイージング
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
210
神速でワイヤーフレームを作るためのライブラリ
448jp
1
680
Figmaで神速ドキュメント作成術
448jp
3
1.5k
今から始めるFigma超入門
448jp
0
1.3k
零細Web制作会社のリモートワーク事情
448jp
0
280
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
610
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
200
Lottieで始めるWebアニメーション入門
448jp
1
440
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5k
Other Decks in Technology
See All in Technology
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
190
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
2
340
From here to resilience - a travel guide
ufried
1
160
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.4k
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
180
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
汎用ポリシー言語Rego + OPAと認可・検証事例の紹介 / Introduction Rego & OPA for authorization and validation
mizutani
1
160
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
100
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
900
OPENLOGI Company Profile for engineer
hr01
1
2.2k
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.3k
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
190
Featured
See All Featured
How to Ace a Technical Interview
jacobian
273
22k
RailsConf 2023
tenderlove
9
580
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Side Projects
sachag
451
41k
GitHub's CSS Performance
jonrohan
1025
450k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Navigating Team Friction
lara
179
13k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Bash Introduction
62gerente
605
210k
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