CSS3 animación-Uso y ejemplo de la propiedad duration

CSS3 animación-La propiedad duration especifica los segundos (s) o milisegundos (ms) que debe durar un ciclo de animación.

La siguiente tabla resume el contexto de uso y el historial de versiones de este atributo.

animación-Sintaxis de uso de duration

La sintaxis de este atributo es la siguiente：

animación-duration:　time　|　initial　|　inherit

El siguiente ejemplo muestra cómo usar animation-Atributo duration.

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

Valor del atributo

La siguiente tabla describe los valores de este atributo.

Compatibilidad del navegador

animación-Compatibilidad del navegador del atributo duration, todos los navegadores principales lo soportan.

Leer más

Consulte los siguientes tutoriales：CSS3Animación。

Atributos y reglas relacionados：animación，animación-nombre，animación-duración，animación-tiempo-función，animación-iteración-número，animación-duración，animación-relleno-modo，animación-reproducir-estado，@keyframes。