Как использовать свойство CSS animation-duration для создания анимаций
Стилистическое свойство animation-duration позволяет определить продолжительность анимации CSS. Данное свойство является обязательным и устанавливает время, необходимое для проигрывания анимации.
Создайте новый файл CSS или используйте текущий CSS-файл и добавьте новые правила для создания анимации duration. В примере ниже мы установили продолжительность анимации 3 секунды:
.example {
animation-name: example;
animation-duration: 3s;
}
Также вы можете указать продолжительность через значение переменной CSS. Например, если вы заранее определили переменные для цветов, шрифтов и т. д., вы можете использовать переменную для установки новой продолжительности анимации:
:root {
--animation-duration: 3s;
}
.example {
animation-name: example;
animation-duration: var(--animation-duration);
}
Теперь вы знаете, как использовать свойство CSS animation-duration для создания анимаций продолжительностью от нескольких секунд до нескольких минут. Обратите внимание, что продолжительность может быть изменена в зависимости от конкретной анимации.