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
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.8k
合意形成のためのFigma活用術
448jp
0
51
書く・即・DONEな仕組みをNuxtで作る
448jp
0
320
神速でワイヤーフレームを作るためのライブラリ
448jp
1
800
Figmaで神速ドキュメント作成術
448jp
3
2.2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
370
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
710
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
260
Other Decks in Technology
See All in Technology
JuliaTokaiとJuliaLangJaの紹介 for NGK2025S
antimon2
1
150
【Oracle Cloud ウェビナー】2025年のセキュリティ脅威を読み解く:リスクに備えるためのレジリエンスとデータ保護
oracle4engineer
PRO
1
120
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
160
Goで実践するBFP
hiroyaterui
1
130
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
240
AIアプリケーション開発でAzure AI Searchを使いこなすためには
isidaitc
1
180
ブロックチェーンR&D企業における SREの実態 / SRE Kaigi 2025
datachain
0
1.4k
[JSAC 2025 LT] Introduction to MITRE ATT&CK utilization tools by multiple LLM agents and RAG
4su_para
1
140
15年入社者に聞く! これまでのCAのキャリアとこれから
kurochan
1
110
信頼性を支えるテレメトリーパイプラインの構築 / Building Telemetry Pipeline with OpenTelemetry
ymotongpoo
8
2.3k
HCP TerraformとAzure:イオンスマートテクノロジーのインフラ革新 / HCP Terraform and Azure AEON Smart Technology's Infrastructure Innovation
aeonpeople
2
290
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
15
2.9k
Featured
See All Featured
Done Done
chrislema
182
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Gamification - CAS2011
davidbonilla
80
5.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Making the Leap to Tech Lead
cromwellryan
133
9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fireside Chat
paigeccino
34
3.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Docker and Python
trallard
43
3.2k
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