animation-duration

Сколько продлится анимация? Секунду, две или всего пару миллисекунд?

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

При помощи свойства animation-duration прописывается длительность одного цикла анимации.

Пример

Секция статьи "Пример"
        
          
          .element {  animation-name: circle-to-square;  animation-duration: 2s;}
          .element {
  animation-name: circle-to-square;
  animation-duration: 2s;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Браузер понимает, за какой промежуток времени нужно проиграть все ключевые кадры анимации.

Как пишется

Секция статьи "Как пишется"

Значение этого свойства указывается в секундах s или миллисекундах ms.

Подсказки

Секция статьи "Подсказки"

💡 В одной секунде 1000 миллисекунд 🤓