CSS动画计时问题

我的整个代码如下所示：CSS动画计时问题

.inner .css-img { 
    max-width: 100%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    opacity: 0; 
    -webkit-animation: css-carousel-fade 10s linear infinite; 
    -moz-animation: css-carousel-fade 10s linear infinite; 
    -ms-animation: css-carousel-fade 10s linear infinite; 
    animation: css-carousel-fade 10s linear infinite; 
} 

.inner .css-img:nth-child(2) { 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    animation-delay: 5s; 
} 

@keyframes css-carousel-fade { 
    0%, 50%, 100% { opacity: 0; } 
    10%, 50% { opacity: 1;} 
}

现在发生的事情是，像一和二之间的转换工作创造，但它花费的时间太长所以显示第1图像，它从第二个图像回到第一个图像需要很长的时间。

来源

2013-12-13 user2184718

不透明度是什么动画。％告诉你整个动画的哪部分处理该部分。因此，从0-45开始，您的不透明度为1，然后从45-90淡入淡出，然后从90-100淡出，然后在动画重新开始时再次回到1。

来源

2013-12-13 20:38:46

好吧。当我将代码更改为上面编辑的内容时，我在图像1和图像2之间进行了正确的转换，而不是两个转换回到一个。 – user2184718

你想淡入1吗？如果是这样，那么将附加到不透明度1的0％更改为15％或20％。 –

加入15％看起来非常适合在第一和第二之间转换。从2回到1的过渡仍然过长。似乎需要很长时间才能显示第一张图片，然后从第二张图片转移回第一张图片。 – user2184718

CSS动画计时问题

回答

相关问题