Christmas Lights Loop Effect

Question

I'm trying to create some Christmas lights (in January) using the CSS -webkit-animation property.

For this, I'm using this image:

I've tried:

@-webkit-keyframes lights {
    0% {
        background-position:0px;
    } 100% {
        background-position:0 -69px;
    }
}

#lights {
    width:100%;
    height:69px;
    background:url(https://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    -webkit-animation: lights 1s infinite;
}

What I want to achieve: I want to constantly change the background position, so it looks like the lights are turning off and on.

For some reason, my code doesn't change the background position, and animated the image.

Answer 1

You can consider steps()¹ to have the needed effect and adjust the positions like below. Pay attention to the initial value because 0 is not the same as 0 0:

@keyframes lights {
    0% {
       /*Two zeros, not one !!*/
       /*[0] is equivalent to [0 50%] and will create a different animation */
        background-position:0 0; 
    } 
    100% {
        background-position:0 -138px;
    }
}

#lights {
    height:69px;
    background:url(https://i.imgur.com/BdGY6tH.png);
    animation: lights 1s infinite steps(2);
}

<div id="lights"></div>

Or do it like this:

@keyframes lights {
    0%,50% {
        background-position:0 0; /*Two zeros, not one !!*/
    } 
    50.1%,100% {
        background-position:0 -69px;
    }
}

#lights {
    height:69px;
    background:url(https://i.imgur.com/BdGY6tH.png);
    animation: lights 1s infinite;
}

<div id="lights"></div>

¹ More details about how to use steps() : https://stackoverflow.com/a/51843473/8620333