метод использования и примеры attribute animation-duration CSS3

пroperty animation-duration CSS3 определяет количество секунд (секунды) или миллисекунд (мс) на завершение одного цикла анимации.

в таблице ниже summarized用法 контекста и истории версий этого свойства.

использование синтаксиса animation-duration

Грамматика этого атрибута такая:

animation-duration: time | initial | inherit

Ниже приведен пример того, как использовать атрибут animation-duration.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration: 2s;
}
　
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}

Значение атрибута

В таблице ниже описаны значения этого атрибута.

Совместимость браузеров

Совместимость браузеров для атрибута animation-duration, все основные браузеры поддерживают этот атрибут.

Дополнительное чтение

Пожалуйста, обратитесь к следующим руководствам:Анимации CSS3.

Соответствующие атрибуты и правила:animation,animation-name,animation-duration,animation-timing-function,animation-iteration-count,animation-duration,animation-fill-mode,animation-play-state,@keyframes.