Css 圣诞灯环效应

我正在尝试使用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;
}

我想要实现的是：我想要不断地改变背景位置，这样看起来像是灯光在关闭和打开

---

由于某种原因，我的代码不会改变背景位置，并动画图像。

< P>可以考虑<代码> STEP（）>代码>强> 1 < /强>以获得所需的效果并调整如下位置。注意初始值，因为

0

与

0 0

不同：

@关键帧灯光{
0% {
/*两个零，不是一个*/
/*[0]相当于[0 50%]，将创建不同的动画*/
背景位置：0；
} 
100% {
背景位置：0-138px；
}
}
#灯光{
高度：69px；
背景：url(https://i.imgur.com/BdGY6tH.png);
动画：灯光1无限步（2）；
}