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

#css #css3 #html5 #анимация

Я пытаюсь создать рождественские огни (в январе), используя 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;
}


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

Почему мой код не меняет background position, а анимирует изображение?

Надеюсь, кто-нибудь может мне помочь.  
    

Ответы

Ответ 1

Вы можете рассмотреть 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);
}





Или сделайте это так:



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





Подробнее о том, как использовать steps(): https://stackoverflow.com/a/51843473/8620333