html - 将关键帧更改为第二张图片

Question

我正在制作带有关键帧的幻灯片，但出现问题..

关键帧在这里改变了第一张图片的位置:

background-image:url('images/cover.png'), url('images/slideshow.jpg');
-webkit-animation:slider 20s infinite alternate ease-in-out;

@-webkit-keyframes slider {
0% {background-position: 0px 0px}
14% {background-position: 0px 0px}
28% {background-position: -1280px 0px}
42% {background-position: -1280px 0px}
56% {background-position: -2560px 0px}
70% {background-position: -2560px 0px}
84% {background-position: -3840px 0px}
100% {background-position: -3840px 0px}
}

但是我要滑动的图像是最后一个，关于如何更改关键帧的优先级有什么想法吗？第一张图片有一些不透明度，使我能够看到第二张图片。如果我交换它们的位置，最后一个就会落在后面，蜜蜂就看不到了……

谢谢

Answer 1

background-position 属性可以有多个值，目前动画同时影响两个图像。这样的事情应该有效:

@-webkit-keyframes slider {  
    0% {background-position: 0 0, 0px 0px}  
    14% {background-position: 0 0, 0px 0px}  
    28% {background-position: 0 0, -1280px 0px}  
    42% {background-position: 0 0, -1280px 0px}  
    56% {background-position: 0 0, -2560px 0px}  
    70% {background-position: 0 0, -2560px 0px}  
    84% {background-position: 0 0, -3840px 0px}  
    100% {background-position: 0 0, -3840px 0px}  
}