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

125

09 августа 2019, 09:50

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

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

Answer 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); 
}

<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>

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

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как хранить в Store React компоненты?

То есть у меня есть набор каких-то заранее созданных компонентов на react, и мне необходимо сделать для них общий store, где хранилось бы информация...

133

javascript

Изменение позиции блока с центра экрана на “своё” место в блоке

Описание задачи: Есть прелоадер, который показывает текст, пока страница грузитсяЕго текст совпадает с текстом в шапке сайта

116

javascript

React активный класс для функции map

Получается фильтр для календаря делаю через map и там 7 обьектов как сделать что бы при выборе там праздничных дат только праздничные получали...

javascript

Scrollreveal.js отказывется работать

Преамбула: Попросили написать простой одностраничник, без админкиБыстро сверстал на бутстрапе, то что было нужно, и добавил анимацию появления...

134