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.5k
"いい感じ"にするためのイージング
Meguro.css #2 LT発表資料
448jp | OKI Yoshiya
July 27, 2018
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
7.1k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Applications with DynamoDB
mza
95
6.5k
KATA
mclloyd
30
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
Why Our Code Smells
bkeepers
PRO
336
57k
Embracing the Ebb and Flow
colly
86
4.7k
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