イージングをCSS関数で管理する

Result

使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で管理しましょう、という内容です。

普段さほど使わないので思いつきませんでしたが皆さん既に取り入れてそうですね。

css

:root {
  --ease-in-quad:       cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic:      cubic-bezier(.55, .055, .675, .19);
  --ease-in-quart:      cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint:      cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo:       cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ:       cubic-bezier(.6, .04, .98, .335);
  --ease-out-quad:      cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic:     cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart:     cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint:     cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo:      cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ:      cubic-bezier(.075, .82, .165, 1);
  --ease-in-out-quad:   cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic:  cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart:  cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint:  cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo:   cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ:   cubic-bezier(.785, .135, .15, .86);
}

従来のイージングと同じ感覚で使えそうです。

あとはkeyframesでセッティングすればOK。楽ですね。

via

bored of your #CSS easing?
try a new one!
Here's 18 pop choices 🤓

example:
–ease-out-expo: cubic-bezier(.19, 1, .22, 1);

gist https://t.co/b92dKTKAyH

play/fork https://t.co/d4GPfuwRBd pic.twitter.com/m8czSbCTRH

— Adam Argyle (@argyleink) July 21, 2020

Adam Argyle氏はChrome開発チームのCSSを担当してるGoogleの方みたいです。easings.cssの名でGistでもコードを用意してくれていました。