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
書く・即・DONEな仕組みをNuxtで作る
448jp
0
260
神速でワイヤーフレームを作るためのライブラリ
448jp
1
740
Figmaで神速ドキュメント作成術
448jp
3
1.9k
今から始めるFigma超入門
448jp
0
1.4k
零細Web制作会社のリモートワーク事情
448jp
0
320
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
650
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
230
Lottieで始めるWebアニメーション入門
448jp
1
520
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.1k
Other Decks in Technology
See All in Technology
Namespace, Now and Then
tagomoris
0
170
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
800
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
450
Building Static Websites with Sculpin
opdavies
0
1.5k
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
LLMに日本語テキストを学習させる意義
ksaito
13
3.6k
Dify - LINE Bot連携 考え方と実用テクニック
uezo
5
1.1k
目標設定と習慣化で今よりも一歩生産性を上げる
sansantech
PRO
7
2.3k
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
2.6k
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
4
1k
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
110
Featured
See All Featured
BBQ
matthewcrist
83
9.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
27
1.6k
GitHub's CSS Performance
jonrohan
1029
450k
Fireside Chat
paigeccino
31
2.9k
For a Future-Friendly Web
brad_frost
173
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
33
1.7k
It's Worth the Effort
3n
182
27k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Designing Experiences People Love
moore
138
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
Writing Fast Ruby
sferik
623
60k
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