Эффект петли рождественских огней ⇐ CSS

[Anonymous]

Я пытаюсь создать рождественские гирлянды (в январе), используя свойство CSS -webkit-animation.

Для этого я использую это изображение:




Я пробовал:

Код: Выделить всё

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

Чего я хочу достичь: я хочу постоянно менять положение фона, чтобы выглядело так, будто свет выключается и включается.

По какой-то причине мой код не меняет положение фона, а анимирует изображение.>

Подробнее здесь: https://stackoverflow.com/questions/541 ... oop-effect