fiddle

Question

我有想要交换的图像（没有幻灯片效果）。第一个周期，图像看起来堆叠在一起（因为它们有孔）。所有后续循环，它都能正常工作（一次只能看到一个）。

HTML

<div class="small xfade">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

@keyframes xfade {
    0%   { opacity:1; }
    17%  { opacity:1; }
    25%  { opacity:0; }
    92%  { opacity:0; }
    100% { opacity:1; }
}
.xfade span {
    animation-name: xfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 8s;

    height: 100%;
    left: 0;
    /* opacity: 0; */
    position: absolute;
    top: 0;
    width: 100%;
}

All visible at once during first loop

Only one visible during first loop, but flash

Answer 1

制作动画时的一个常见场景是，您可以为多个元素创建相同的动画，但是您希望它们被延迟，从而形成一个完整的循环。

然后设置动画持续时间为8秒，如果你有4个元素，则为第一个设置延迟0，第二个设置延迟为2秒，其他设置为4秒和6秒。

这个问题是第二个元素仅在2秒后开始动画。与此同时，它具有初始属性，可以匹配或不匹配动画的属性（通常不是）。

解决这个问题的最佳方法是要意识到，如果动画持续时间是8秒，那么将延迟设置为2秒与将其设置为-6s相同。 因为如果从6秒开始计算8秒，则结束于2秒。但是，动画从第一时开始运行，具有应该具有的属性。

所以，你的情况下的延迟应该是0s，-6s，-4s，-2s。 只需从转换延迟中减去转换持续时间。

每当你设置一个动画，并发现第一个动画是错误的，但在那之后它们没问题，可能的问题（和解决方案）是这个。

如果你想让一切变得更快，但其他一切都相同，那么你必须减少动画持续时间和所有动画延迟

示例设置

.xfade span {
    animation-duration: 4s;
}

.xfade span:nth-of-type(1) {
    animation-delay: -1s;
}

.xfade span:nth-of-type(2) {
    animation-delay: -2s;
}
.xfade span:nth-of-type(3) {
    animation-delay: -3s;
}

fiddle

另外，让我们分析如何计算补间时间。首先，您要为一个与另外3个元素共享全部时间的元素设置动画。这意味着每个元素都有1/4的时间，即25％。

此时间必须在完整显示的时间和 tween 的时间之间划分。在原始示例中，补间时间为8％。如果你希望减少，那么假设补间时间为6％。然后，完整显示时间将是25 - 6 = 19。

这为我们提供了关键帧的第一部分：

@keyframes xfade {
    0%   { opacity:1; }
    19%  { opacity:1; }
    25%  { opacity:0; }

现在，对于最终的关键帧，我们必须记住补间时间是6，并在结束时设置它。关键帧应该是100 - 6 = 94. Remainig关键帧：

    94%  { opacity:0; }
    100% { opacity:1; }
}

css3动画pngs具有透明度

1 个答案:

fiddle