缓动动画到底什么时候到达中点？

Question

我正在模拟卡片的翻转效果。卡片是一张 div，里面有一张图片。我想在动画恰好位于其中点时（即当卡片恰好旋转 90 度时）更改该图像。 transition的定时函数设置为ease-out

所以我的问题是，在设置的过渡持续时间的多少部分，缓出动画会到达其中点？

Answer 1

您可以在方便的时候设置这些值。问题是，使用 ease-out 后，过渡会在最后变慢，因此要知道您需要使用开发人员工具检查动画的确切时间，并检查需要图像交换的确切时间。使用 Firefox 开发人员工具非常容易，here you can see how to do it.

Answer 2

如果您参考 the MDN page，您可以在那里找到图形：

红线表示当您处于 50% 的时间时，您处于大约 70% 的旋转

绿线表示如果您想在 50% 轮换，您需要在 34% 左右。

举例说明。请注意当另一个动画恰好位于其中点（旋转 90 度）时 3.4s 之后背景颜色将如何变化：

.box {
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  animation:
     change 10s ease-out,
     t 3.4s linear forwards; 
}
@keyframes change{
   to {
     transform:rotate(180deg);
   }
}

@keyframes t{
   0%,98% {
     background:red;
   }
   99%,100% {
     background:blue;
   }
}

<div class="box"></div>

如果你想要一个准确的结果，让我们做一些数学运算。从同一个 MDN 页面我们可以看到我们的贝塞尔曲线是由 4 个控制点组成的，因此我们将使用以下公式：

P = (1−t)^3*P0 + 3*(1−t)^2*t*P1 +3*(1−t)*t^2*P2 + t^3*P3

和P0(0,0) P1(0,0) P2(0.58,1) P3(1,1)

^{https://javascript.info/bezier-curve#maths}

这会给我们：

X = 3*(1−t)*t^2*0.58 + t^3  [X is our time axis]
Y = 3*(1−t)*t^2 + t^3       [Y is our output axis]
t in the range [0,1]

我们简化：

X = t²*(1.74 - 0.74*t)
Y = t²*(3 - 2*t)

如果Y = 0.5我们将得到t = 0.5（我不会详细说明解方程的步骤）。然后我们将有 X = 0.3425（我们的 34%）

如果 X = 0.5 我们将得到 t = 0.6257。然后我们将有 Y = 0.6845（我们的 70%）

缓动动画到底什么时候到达中点？

When exactly does an ease animation reach its midpoint?

css

css-transitions

css-animations