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
170
神速でワイヤーフレームを作るためのライブラリ
448jp
1
650
Figmaで神速ドキュメント作成術
448jp
3
1.3k
今から始めるFigma超入門
448jp
0
1.3k
零細Web制作会社のリモートワーク事情
448jp
0
260
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
570
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
190
Lottieで始めるWebアニメーション入門
448jp
1
410
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5k
Other Decks in Technology
See All in Technology
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
20240321_生成AI時代のDevOps
kzkmaeda
2
610
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4.1k
Autify Company Deck
autifyhq
1
30k
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
200
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
Building a RAG app to chat with your data (on Azure)
pamelafox
0
110
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
860
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
230
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Embracing the Ebb and Flow
colly
78
4.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Bash Introduction
62gerente
604
210k
Scaling GitHub
holman
456
140k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Thoughts on Productivity
jonyablonski
57
3.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
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