Задать все значения анимации в одну строчку

Рейтинг: 0Ответов: 1Опубликовано: 28.01.2023
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%;

Как задать все значения в одну строчку, то есть не разбивать по отдельности...

css html html5 css3
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Легко и просто:

.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: название продолжительность временнáя-функция задержка количество-итераций направление режим-заполнения;