css – 圣诞灯循环效果

我正在尝试使用CSS -webkit-animation属性创建一些圣诞灯(1月份).

为此,我正在使用此图片：

我试过了：

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

我想要实现的目标：我想不断改变背景位置,看起来灯光正在关闭和打开.

出于某种原因,我的代码不会更改背景位置,并为图像设置动画.

您可以考虑使用steps()1来获得所需的效果并调整位置,如下所示.注意初始值,因为0与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://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    animation: lights 1s infinite steps(2);
}

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

或者这样做：

@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://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    animation: lights 1s infinite;
}

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

1有关如何使用步骤()的更多详细信息：https://stackoverflow.com/a/51843473/8620333