CSS3 animação-Método de uso e exemplo do atributo name

do animation-O atributo nameCSS especifica o nome @keyframes que deve ser aplicado ao elemento selecionado para definir a animação.

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

animação-Uso da sintaxe name

A sintaxe deste atributo é a seguinte:

animação-name:　keyframe-name　|　none　|　initial　|　inherit

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

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animação-name:　moveit;
　　　　-webkit-animação-duração:　2s;
　　　　
　　　　animação-name:　moveit;
　　　　animação-duração:　2s;
}
　
/*　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

animação-Compatibilidade do navegador do atributo name, todos os navegadores populares suportam este atributo.

Leia mais

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

Atributos e regras relacionados:animação，animação-duração，animação-timing-função，animação-delay，animação-iteração-count，animação-direção，animação-fill-modo，animação-play-state，@keyframes。