Manual de Referência CSS

Regras CSS (RULES)

大全 de Atributos CSS

CSS3 animação-Atributo delay CSS3 alinhamento-Atributo self

CSS3 Método de uso e exemplo da propriedade animation

A propriedade CSS animation é uma abreviação de várias propriedadesanimação-nome，animação-duração，animação-tempo-função，animação-delay，animação-iteração-contagem，animação-direção，animação-fill-modoeanimação-play-estado。

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

Valor padrão：	none 0 ease 0 1 normal none running;
Aplicável a：	Todos os elementos::before e::after Elemento pseudo
Herança：	Nenhum
Animável:	Não.Veja também Propriedade de animação。
Versão：	CSS3nova funcionalidade
Sintaxe JavaScript:	object.style.animation="mymove 5s infinite"

A sintaxe de uso da animation

A sintaxe dessa propriedade é a seguinte:

animation:　[　name　duration　timing-function　delay　iteration-count　direction　fill-mode　play-state　]　|　initial　|　inherit

O exemplo a seguir demonstra como usar a propriedade animation.

Exemplo

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

Teste e veja‹/›

Nota:É necessário especificar pelo menos dois atributos animation-name e animation-duration (maior que 0), para que a animação ocorra.

Valor do atributo

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
animação-nome	Especifique o nome da animação definida por @keyframes aplicada ao elemento selecionado.
animação-duração	Especifique o tempo necessário para completar um ciclo de animação em segundos ou milissegundos.
animação-tempo-função	Especifique como a animação deve ser executada durante o tempo de duração de cada ciclo, ou seja, a função de suavização.
animação-delay	Especifique o atraso antes do início da animação.
animação-iteração-contagem	Especifique o número de vezes que a animação deve ser reproduzida antes de parar.
animação-direção	Especifique se a animação deve ser reproduzida ao contrário em um ciclo alternado.
animação-fill-modo	Especifique como a estilização deve ser aplicada ao alvo da animação antes e após a execução da animação.
animação-play-estado	Especifique se a animação deve ser executada ou pausada.
initial	Defina essa propriedade como seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor calculado da propriedade animation do elemento pai.

Compatibilidade do navegador

Compatibilidade do navegador para atributo de animação, todos os navegadores populares suportam essa propriedade. O número representa a versão do primeiro navegador que suporta essa propriedade.

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-，15+ ^-webkit-