Легко и просто:
.bell1 {
animation-name: bell-ring;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: -1.5s;
animation-direction: alternate;
transform-origin: 50%;
}
.bell2 {
animation: bell-ring 1s ease-in-out -1.5s infinite alternate;
transform-origin: 50%;
}
@keyframes bell-ring {
0% {
background: red;
}
100% {
background: blue
}
}
<div class="bell1">123</div>
<div class="bell2">123</div>
Если исходить из MDN, то очерёдность должна выглядеть так:
animation: duration timing-function delay iteration-count direction name;
Но я обычно делаю так:
animation: name duration timing-function delay iteration-count direction fill-mode;
Перевод на русский:
animation: название продолжительность временнáя-функция задержка количество-итераций направление режим-заполнения;