2018年02月26日(月)

CSS変数でイージングアニメーションを管理

• 0
• 1
• 4
• 41

Result

See the Pen LQgZBv by kachibito (@kachibito) on CodePen.

カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにします

css

:root {/*変数*/ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezi...