循环动画中的淡入淡出 [英] Looping a fade in animation

问题描述

我想为 JSFiddle 中的金块设置动画。

Im trying to animate the gold blocks in the JSFiddle.

所有的金块都应该是隐形的，然后第一个金块消失，接着是第二个金块，然后是第三个第四个和第五个金块，给出一个金块塔。

All gold blocks should be invisible, then the first one fades in, followed by the second, then the third fourth and fifth, giving a tower of gold blocks.

@keyframes twinkle {
0% {
    opacity: 0;
}
10% {
    opacity: 1;
}
100% {
    opacity: 1;
}                   
}

它适用于动画的第一轮。

It works fine for the first round of the animation. But when it loops all gold blocks are on.

推荐答案

方案

根据mozilla 该延迟仅在应用动画时最初应用。这是在浏览器加载页面时应用css。因此，初始延迟不是可循环的。

According to mozilla the delay is only applied initially, when the animation is applied. This is done on page load by the browser, applying the css. Thus, the initial delay is not loopable.

有一个脚本化的解决方案，通过切换一个类，以使用切换启动和停止动画。
这是一个小提琴演示原理。

There is a scripted solution that toggles a class in order to start and stop the animation using a toggle. Here's a fiddle demonstrating the principle.

但是，在两个连续语句中删除和添加CSS类不起作用 - 它通过呈现路径被优化。我尝试过 setTimeout 和 requestAnimationFrame ，但没有效果。

However, removing and adding a CSS class in two consecutive statements does not work - it gets optimized away by a rendering path. I've tried setTimeout and requestAnimationFrame but to no avail.

这篇关于循环动画中的淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！