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
200
神速でワイヤーフレームを作るためのライブラリ
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
技術力の伸ばし方を考える
khirata
0
130
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
410
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
180
Taking Flight with Tailwind CSS
opdavies
0
4.3k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
NewSQL Landscape
oracle4engineer
PRO
5
3.1k
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
220
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
140
AI JIMY - 登壇(インストール編)
hanacchi
0
120
データ基盤を支える技術
chanyou0311
5
2.9k
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
370
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
270
Featured
See All Featured
Atom: Resistance is Futile
akmur
260
25k
Adopting Sorbet at Scale
ufuk
69
8.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Why Our Code Smells
bkeepers
PRO
331
56k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Faster Mobile Websites
deanohume
300
30k
How to name files
jennybc
65
93k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Producing Creativity
orderedlist
PRO
338
39k
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