Question

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

我有4张图片，我每隔12秒就会尝试旋转一次动画。

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

对于＆＃34; n＆＃34;图像您必须定义：a =一个图像的显示时间   b =交叉衰落的持续时间总动画持续时间当然是   T =（A + B）* N

animation-delay = t / n或= a + b

关键帧的百分比：


0％

a / t * 100％

（a + b）/ t * 100％= 1 / n * 100％

100％ - （b / t * 100％）

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秒。

交叉淡化关键帧百分比算法

1 个答案: