@mrsakura52

Как указать несколько анимаций для одного элемента?

Есть пустой div:

<div class='block'></div>

Помимо этого есть 2 анимации:

@keyframes ribbon {
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

@keyframes background {
  50% {
    background-color: skyblue;
    box-shadow: 0 -200px 100px -100px yellowgreen inset;
  }
}


При попытке:

block{
    width: 100%;
    height: 50px;
    background-color: gold;
    box-shadow: 0 -200px 100px -120px crimson inset;
    animation: background 3s infinite alternate;
}
block{
    animation: ribbon 3s;
}

Анимируется только ribbon. Как можно анимировать block при анимации background анимацией ribbon? Такой же вопрос с тремя и более анимациями...
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
y0u
@y0u
dev
animation: background 3s infinite alternate,  ribbon 3s;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы