如何创建CSS cubic-bezier()函数的水平镜像曲线？

要得到原贝塞尔曲线的水平镜像（用于返程动画的时序镜像），直接交换控制点或者只替换x为1-x都不对，正确的转换规则是：

假设原缓动曲线为 cubic-bezier(x1, y1, x2, y2)，那么它的水平镜像曲线（对应从(1,1)到(0,0)的返程缓动）应该是：

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

用内置ease函数验证 #

原ease的表达式是 cubic-bezier(0.25, 0.1, 0.25, 1)，代入转换规则：

• 1 - x2 = 1 - 0.25 = 0.75
• 1 - y2 = 1 - 1 = 0
• 1 - x1 = 1 - 0.25 = 0.75
• 1 - y1 = 1 - 0.1 = 0.9

得到镜像后的曲线：cubic-bezier(0.75, 0, 0.75, 0.9)，完全匹配你描述的可视化效果。

原理说明 #

原曲线的路径是从(0,0)到(1,1)，控制点是(x1,y1)、(x2,y2)；镜像后的返程曲线需要从(1,1)到(0,0)，相当于把整个坐标系沿x + y = 1这条线翻转。每个点(a,b)的镜像点就是(1-a, 1-b)，同时因为曲线的控制点顺序要对应反转（原曲线是先(x1,y1)再(x2,y2)，镜像后要先原(x2,y2)的镜像，再原(x1,y1)的镜像），所以才会得到上面的转换公式。

往返动画的用法 #

比如你有一个元素要做往返动画，原动画用原缓动，返程动画用转换后的镜像缓动：

.element {
  /* 原动画：从初始状态到目标状态 */
  animation: forward 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.element.return {
  /* 返程动画：从目标状态回到初始状态，用镜像缓动 */
  animation: backward 1s cubic-bezier(0.75, 0, 0.75, 0.9) forwards;
}

@keyframes forward {
  to { transform: translateX(200px); }
}

@keyframes backward {
  to { transform: translateX(0); }
}

内容的提问来源于stack exchange，提问作者Sideways S