如何使ease-in-out动画曲线与ease-out动画曲线匹配？

当前案例修复方法 #

你遇到的核心问题是：第一个元素的ease-in-out曲线是前半段加速、后半段减速的对称曲线，第二个元素需要完全复刻第一个元素在后0.5秒的运动轨迹，而非使用普通的ease-out曲线。

针对你的代码，只需修改第二个元素的缓动曲线为cubic-bezier(0.333, 0.5, 0.666, 1)，就能让两者动画完全同步：

修改后的完整代码 #

HTML

<button onclick='animateit()'>animate</button>
<button onclick='reset()'>reset</button>
<div id='first'></div>
<div id='second'></div>

CSS

* {
  margin: 5px;
}

div {
  width: 50px;
  height: 50px;
  background: black;
}

#first {
  transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

#second {
  transition: 0.5s cubic-bezier(0.333, 0.5, 0.666, 1);
  transform: translateX(100px);
}

.animated {
  transform: translateX(200px) !important;
}

JS

const first = document.getElementById("first");
const second = document.getElementById("second");

function animateit() {
  first.classList.add("animated");
  setTimeout(() => second.classList.add('animated'), 500)
}

function reset() {
  first.classList.remove('animated');
  second.classList.remove('animated');
}

通用匹配逻辑 #

对于任意ease-in-out曲线（元素A，时长T）和需要同步后半段的元素（元素B，延迟T/2启动，时长T/2），可按以下步骤推导匹配曲线：

1. 时间映射：元素B的动画时间进度s（0到1）对应元素A的时间进度t=(s+1)/2（即元素A的后半段时间范围）。
2. 位移匹配公式：元素B的缓动曲线C_B(s)需满足：

   C_B(s) = 2 * C_A((s+1)/2) - 1
   

   其中C_A(t)是元素A的缓动曲线函数（输入0到1的时间进度，输出0到1的位移进度）。
3. 转换为贝塞尔控制点：将推导得到的C_B(s)函数转换为三次贝塞尔曲线的cubic-bezier(x1,y1,x2,y2)格式。对称ease-in-out曲线可通过代数计算直接得到控制点；非对称曲线可借助曲线拟合工具或在线贝塞尔编辑器调整验证。

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