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

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

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

По какой-то причине мой код не меняет положение фона и не анимирует изображение.

css css-animations

12.01.2019 15:45

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

252

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
}