交叉淡入淡出关键帧百分比算法

Question

我在网站上找到了这个，但我不确定我是否正确理解了它......每次我尝试它都没有成功。有人可以为我详细说明一下吗？

我

有 4 张图像，我尝试每 12 秒旋转一次，并带有 1 秒的动画。

他提出了以下算法来确定百分比和 计时：

对于"n"张图像 您必须定义： a=一个图像的演示时间 b=交叉淡入淡出的持续时间 动画总持续时间当然是 t=(a+b(*n

动画延迟 = t/n 或 = a+b

关键帧的百分比：

1. 0%
2. 应付*100%
3. (a+b(/t*100% = 1/n*100%
100
4. %-(桶/吨*100%(
5. 100%

你可以在这里找到这个：http://css3.bradshawenterprises.com/cfimg/

谢谢。

@keyframes imageAnimation {
  0% { opacity: 1;
  animation-timing-function: ease; }
  23% { opacity: 0;
  animation-timing-function: ease; }
  25% { opacity: 0;
  animation-timing-function: ease; }
  33% { opacity: 0;
  animation-timing-function: ease; }
  100% { opacity: 1 }
}

这是我的小提琴：https://jsfiddle.net/joelssk/1jLk06as/4/

Answer 1

百分比没有什么神奇之处。如果您有 4 张需要旋转的图像，每张图像在 1 秒过渡期前 11 秒显示，那么看起来如何？

在下面的草图中，X是可见的，_是不可见的，<和>分别淡入和淡出。

time  0           12          24          36
img1  XXXXXXXXXXX>___________________________________<
img2  ___________<XXXXXXXXXXX>________________________
img3  _______________________<XXXXXXXXXXX>____________
img4  ___________________________________<XXXXXXXXXXX>

如果我们看第一张图片，关键帧是什么，即当必须发生某些事情时？从0到11图像可见。从11到12它正在逐渐消失。从12到47，它都是看不见的。从47到48，它正在逐渐消失。

您的总时间为 48 秒，因此这些时间转换为(在 0 至 100 (：

• [0, 23] ： 可见
• [23, 25]：淡出
• [25, 98] ： 隐形
• [98, 100]：淡入

或者，就关键帧而言：

@keyframes imageAnimation {
  0% { opacity: 1; animation-timing-function: ease; }
  23% { opacity: 1; animation-timing-function: ease; }
  25% { opacity: 0; animation-timing-function: ease; }
  98% { opacity: 0; animation-timing-function: ease; }
  100% { opacity: 1 }
}

---

现在，很明显，所有图像都遵循相同的模式，它们仅在不同的时间开始。从图中可以看出，延迟应该是0、12、24和36秒。