Exemplo
Pausa uma animação:
div
{
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
} Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade de animação-play-state especifica se a animação está em execução ou em pausa.
Note: Use essa propriedade em um JavaScript para pausar uma animação no meio de um ciclo.
| Valor padrão: | running |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.animationPlayState="paused" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| animation-play-state | 43,0 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 9 4.0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
CSS Syntax
animation-play-state: paused|running|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| paused | Especifica que a animação está em pausa | Jogue " |
| running | Valor padrão. Especifica que a animação está sendo executado | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 animações
HTML DOM de referência: animationPlayState property
mais Exemplos
Exemplo
Pausa uma animação em foco:
div:hover {
-webkit-animation-play-state: paused; /*
Chrome, Safari, Opera */
animation-play-state: paused;
}
Tente você mesmo "