css3动画pngs具有透明度

时间:2014-01-25 07:41:12

标签: css3 png css-animations

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

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

1 个答案:

答案 0 :(得分: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; }
}