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

Question

[aquapendente]

Есть пустой 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? Такой же вопрос с тремя и более анимациями...

Answer 1

[y0u]

animation: background 3s infinite alternate,  ribbon 3s;