0
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%;

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

3
  • 1
  • У меня не выходит...
    – Aleks
    28 янв в 11:00
  • 1
    Отредактируйте вопрос и добавьте пример, как Вы пытаетесь записать свойство.
    – UModeL
    28 янв в 11:03

1 ответ 1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.