Question

我试图动画JSFiddle中的金块。

所有的金块应该是看不见的，然后第一个被淘汰，接着是第二个，然后是第三个和第五个，给出一个金块塔。

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

它适用于第一轮动画。但当它循环时，所有的金块都打开了。

我出错的任何想法？

Answer 1

你没有在重新排队之前重置你的循环。以下是css更改的工作小提琴。

@keyframes twinkle {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }                   
}

编辑1：

所以我不得不修改小提琴中的一些东西。首先，现在有一小部分JS，所以它会重置。

setInterval(function (){
    window.elm = document.getElementById('main-block'),
    window.newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(window.newone, window.elm);
}, 5000);

这是修改后的HTMl标记。

<div id="main-block">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>
    <div class="block four"></div>
    <div class="block five"></div>
</div>

最终的CSS

.block{
    background: gold;
    margin: 1rem;
    width: 30px;
    height: 30px;
    opacity: 0;
}

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

.one{
    animation: twinkle 5s ease-in-out infinite; 
}
.two{
    animation: twinkle 5s 1s ease-in-out infinite; 
}
.three{
    animation: twinkle 5s 2s ease-in-out infinite; 
}
.four{
    animation: twinkle 5s 3s ease-in-out infinite; 
}
.five{
    animation: twinkle 5s 4s ease-in-out infinite; 
}

https://jsfiddle.net/kx7bf19g/4/

Answer 2

您必须将不透明度重置为0.

尝试这个，玩关键帧:) 创建了5个不同的关键帧只需稍微调整一下。

https://jsfiddle.net/y7q1jj7g/2/ - 工作小提琴

这是第一个关键帧：

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

Answer 3

According to mozilla延迟仅在应用动画时最初应用。这是在浏览器的页面加载上完成的，应用了css。因此，初始延迟不可循环。

有一个脚本化的解决方案可以切换一个类，以便使用切换来启动和停止动画。这是fiddle展示原则。

但是，在两个连续语句中删除和添加CSS类不起作用 - 它会被渲染路径优化掉。我已经尝试了setTimeout和requestAnimationFrame，但无济于事。

循环播放动画

3 个答案: