问题
我有两个css关键帧动画,我在一个元素上运行：
.fade-bg {
animation-name: fade-bg-1,fade-bg-2;
animation-delay: 0,6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
动画定义如下：
@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 */ }
上面的工作,但当它到达第二个动画时,它不断重复该动画,不会循环回fade-bg-1.
我尝试了许多不同的动画方向组合,但无济于事.
问题
如何使动画返回到fade-bg-1并重复自身？
这个例子
解决方法
没有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');
}
}
