05. CSS 缓动变量 && 首字下沉 & 放大缩小动画

文章预览

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 ………………………………