如何使用多个关键帧定义循环 css 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25384314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I loop a css animation with multiple keyframe definitions?
提问by hitautodestruct
The Issue
问题
I have two css keyframe animations which I am running on a single element:
我有两个在单个元素上运行的 css 关键帧动画：
.fade-bg {
animation-name: fade-bg-1, fade-bg-2;
animation-delay: 0, 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The animations are defined as such:
动画定义如下：
@keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url(image-1.jpg);
}
50% {
opacity: 1;
background-image: url(image-1.jpg);
}
to {
opacity: 0;
background-image: url(image-1.jpg);
}
}
@keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg */ }
The above works but when it gets to the second animation, it keeps repeating only that animation and does not loop back to fade-bg-1.
上面的工作但是当它进入第二个动画时，它只会重复那个动画并且不会循环回到fade-bg-1.
I've tried many different combinations of animation-directionbut to no avail.
我尝试了许多不同的组合，animation-direction但都无济于事。
The Question
问题
How do I make it so that the animation returns to fade-bg-1and repeats itself?
如何使动画返回fade-bg-1并重复？
The Example
这个例子
采纳答案by user3942918
Without javascript I don't think you can. However you can achieve the same effect using a single keyframe animation.
没有 javascript，我认为你做不到。但是，您可以使用单个关键帧动画实现相同的效果。
.fade-bg {
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
@keyframes fade-bg {
0% {
opacity: 0;
background-image: url('image-1.jpg');
}
25% {
opacity: 1;
background-image: url('image-1.jpg');
}
50% {
opacity: 0;
background-image: url('image-1.jpg');
}
51% {
opacity: 0;
background-image: url('image-2.jpg');
}
75% {
opacity: 1;
background-image: url('image-2.jpg');
}
100% {
opacity: 0;
background-image: url('image-2.jpg');
}
}
回答by Gavin Markee
I'm not sure this is possible with just css, but if you set up a setInterval method in JS cleverly, you could probably simulate the same thing by splitting the class into two.
我不确定仅使用 css 是否可行，但是如果您在 JS 中巧妙地设置了 setInterval 方法，您可能可以通过将类分成两个来模拟相同的事情。
var index = 1;
function switchBackground() {
if (index == 1) {
//this switches to the first background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-1";
index = 0;
}
else {
//this switches to the second background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-2";
index = 1;
}
}
setInterval(switchBackground(), 6000);
With .fade-bg-1 and .fade-bg-2 being the two animation classes.
.fade-bg-1 和 .fade-bg-2 是两个动画类。
Here's a jsfiddleif you want to play with it.
如果你想玩它，这里有一个jsfiddle。
回答by hitautodestruct
I asked this question almost 6 years ago, much has changed but no real solution with pure css.
大约 6 年前我问过这个问题，发生了很多变化，但没有真正的纯 css 解决方案。
The closest I could come up with was using a pseudo element to apply the second animation to.
我能想到的最接近的是使用伪元素来应用第二个动画。
Possible Solution:
可能的解决方案：
Use a pseudo element like ::afterand apply the second animation to it.
使用类似的伪元素::after并将第二个动画应用到它。
Code:
代码：
.animation--fade-bg, .animation--fade-bg::after {
width: 500px;
height: 500px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
animation-iteration-count: infinite;
animation-duration: 3s;
}
.animation--fade-bg::after {
content: "";
display: block;
animation-direction: reverse;
}
.animation--fade-bg-1 {
animation-name: fade-bg-1;
}
.animation--fade-bg::after {
animation-name: fade-bg-2;
}
@keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
}
@keyframes fade-bg-2 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}<div class="animation--fade-bg animation--fade-bg-1"></div>