圣诞灯循环效果

Question

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

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

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

Answer 1

您可以考虑steps()¹以获得所需的效果并调整位置,如下所示.注意初始值因为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://i.imgur.com/BdGY6tH.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://i.imgur.com/BdGY6tH.png);
    animation: lights 1s infinite;
}

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

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