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}  
}