CSS3具有透明度的PNG动画

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%;
}

在第一个循环期间都可以立即可见

在第一个循环中只有一个可见，但是flash

Answer 1

做动画时的通常场景是您对几个元素的动画相同的动画，但是您希望它们被延迟，从而使它们成为一个完整的周期。

然后，您将动画效法设置为8秒，如果您有4个元素，则将第一个延迟设置为0，第二个延迟为2，而其他延迟为4秒，则设置为4s和6s。P>

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

解决方案的最佳方法是意识到，如果动画效力为8s，则将延迟设置为2s与将其设置为-6相同。因为如果您从-6s开始计数8s，则将以2s 结束。但是，然后，动画从第一刻开始运行，具有应该具有的属性。

因此，您的情况中的延迟应为0s，-6，-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;
}

小提琴

另外，让我们分析如何计算两次时间。首先，您正在为一个与另外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。保留键框：

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