manual de referência CSS

regras CSS @

大全 de propriedades CSS

CSS3 Animação-Iteration-Atributo count CSS3 Animação-Atributo duration

CSS3 Animação-Fill-Uso e exemplo do atributo mode

CSS3 Animação-Fill-A propriedade mode especifica como o estilo é aplicado ao alvo da animação antes e após sua execução.

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

Valor padrão:	None
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.animationFillMode="para frente"

Animação-Fill-Uso da sintaxe do modo

A sintaxe dessa propriedade é a seguinte:

Animação-Fill-modo: nenhum | para frente | para trás | ambos | inicial | herdar

O exemplo a seguir demonstra como usar animation-Fill-do atributo mode.

Exemplo

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-Animação-name: moveit;
　　　　-webkit-Animação-duration:　4s;
　　　　-webkit-Animação-Fill-mode: forwards;
　　　　
　　　　Animação-name: moveit;
　　　　Animação-duration:　4s;
　　　　Animação-Fill-mode: forwards;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　From {left: 0;}
　　　　To {left:　50%;}
}
　
@keyframes moveit {
　　　　From {left: 0;}
　　　　To {left:　50%;}
}

Teste e veja‹/›

Valor do atributo

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
None	A animação não aplicará nenhum estilo ao alvo antes ou após a execução.
Forwards	Após a conclusão da animação (determinada porAnimação-Iteration-Count), a animação aplicará os valores dos atributos no final da animação.
Backwards	A animação aplicará os valores dos atributos definidos na chave帧, a chave帧 será determinada porAnimação-DelayA primeira iteração da animação começa dentro do período definido pelo atributo, esses são os valores da chave帧 from (Animação-DirectionPara normal ou alternate) ou para o valor da chave帧 (Animação-DirectionPara reverse ou alternate-Reverse).
Both	A animação seguirá as regras para frente e para trás, expandindo assim os atributos da animação em ambas as direções.
Initial	Defina essa propriedade como seu valor padrão.
Inherit	Se especificado, o elemento relacionado adota o animation do pai.-Fill-Valor calculado do atributo mode.

Compatibilidade do navegador

Animação-Fill-Compatibilidade do atributo mode dos navegadores, todos os navegadores populares suportam essa propriedade.

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