Question

I am making an slideshow with keyframes but there is an issue..

The keyframe changes the position of the first image here:

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

But the image i want to slide is the last, any ideas on how to change it priority of the keyframe? The first image has some opacity which enables me to see the second one. If i swap places on them the last one ends up behind and cannot bee seen…

thanks

Answer 1

The background-position property can have multiple values, and currently the animation is effecting both images. Something like this should work:

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