CSS 缓动变量

在设计中,大多数 Web 开发人员对于 transition-timing-function 的大多数用例使用内置的 ease、ease-in、ease-out 或 ease-in-out 函数。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即 bezier-curve() 函数。

使用 bezier-curve(),我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用 bezier-curve() 函数编写。以下是一些有用的缓动函数,为了便于使用,将其存储在 CSS 变量中:

:root {/* ease-in 对应于 cubic-bezier(0.42, 0, 1.0, 1.0) */--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 对应于 cubic-bezier(0, 0, 0.58, 1.0) */  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);--ease-out-cubic: cubic-bezier(0.215,