CSS3 animation-iteration-Método de uso e exemplo da propriedade count

CSS3 animation-iteration-A propriedade count especifica o número de vezes que o animação deve ser reproduzida antes de parar.

A tabela a seguir resume o contexto de uso e o histórico de versões deste atributo.

animation-iteration-Sintaxe de uso do count

A sintaxe deste atributo é:

animation-iteration-count:　number　|　infinite　|　initial　|　inherit

O exemplo a seguir demonstra como usar o animation-iteration-Atributo count.

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

Valor do atributo

A tabela a seguir descreve os valores deste atributo.

Compatibilidade do navegador

animation-iteration-Compatibilidade do navegador do atributo count, todos os navegadores populares suportam este atributo.

Leia mais

Por favor, consulte o seguinte tutorial:CSS3Animação。

Atributos e regras relacionados:animation，animation-name，animation-duration，animation-timing-function，animation-delay，animation-direction，animation-fill-mode，animation-play-state，@keyframes。