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
310
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.8k
合意形成のためのFigma活用術
448jp
0
130
書く・即・DONEな仕組みをNuxtで作る
448jp
0
390
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.7k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
Other Decks in Technology
See All in Technology
Grafana Meetup Japan Vol. 6
kaedemalu
1
180
Webアクセシビリティ入門
recruitengineers
PRO
3
1.4k
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Browser
recruitengineers
PRO
6
1.9k
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
200
浸透しなさいRFC 5322&7208
hinono
0
130
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
410
制約理論(ToC)入門
recruitengineers
PRO
8
3.5k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
220
AWSで推進するデータマネジメント
kawanago
0
240
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
7
780
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
187
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Visualization
eitanlees
147
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Statistics for Hackers
jakevdp
799
220k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Navigating Team Friction
lara
189
15k
Code Review Best Practice
trishagee
70
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
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