使用 cubic‑bezier 提升 CSS 过渡

Source: Dev.to

什么是 cubic‑bezier？

在 CSS 中，cubic-bezier 用于 transition-timing-function 或 animation-timing-function 属性。它通过三次贝塞尔曲线定义在过渡期间如何计算中间值。

cubic-bezier(x1, y1, x2, y2)

这四个数字定义了曲线上两个控制点。曲线始终从 (0, 0) 开始，结束于 (1, 1)，分别代表过渡的起点和终点。控制点决定动画在这两个状态之间的进展方式。

详细说明请参阅 MDN Web Docs 中的 easing functions。

有区别的示例

下面的代码片段用更具表现力的 cubic‑bezier 曲线替代了默认的缓动。将鼠标悬停在实时环境中的元素上即可看到效果。

示例 1 – 缩放并旋转

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

普通 CSS

.icon {
  transition: transform 0.5s cubic-bezier(.68, -0.6, .32, 1.6);
}
.icon:hover {
  transform: scale(0.8) rotate(359deg);
}

示例 2 – 放大

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

普通 CSS

.button {
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.button:hover {
  transform: scale(1.5);
}

示例 3 – 水平平移

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

普通 CSS

.pill {
  transition: transform 0.5s cubic-bezier(.87, 0, .13, 1);
}
.pill:hover {
  transform: translateX(2rem);
}

注意
Tailwind CSS 提供了更好的默认值，使用 ease-{in,out,in-out} 类。参见 Tailwind transition timing function 文档。

某些 cubic-bezier 函数中的负值会产生“弹跳”效果，即在最终目标之前先超出目标再回落，使动画拥有更高级的手感。

寻找完美曲线

与其盲目猜测数值，不如使用交互式工具 Easing Wizard。拖动控制点，实时观看动画效果，并直接将生成的 cubic-bezier 值复制到你的 CSS 中。

普通的 ease 与精心打造的 cubic-bezier 曲线之间的差别立刻可见——你的界面会显得更灵敏、更有活力，也更专业。

试试看：将类似下面的通用过渡

transition: all 300ms ease;

替换为自定义曲线，例如：

transition: all 300ms cubic-bezier(.68, -0.6, .32, 1.6);

亲自感受一下改进的效果吧。