Propriedade de estilo de animaçãoTimingFunction
Exemplo
Alterando a propriedade animationTimingFunction de um elemento <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Definição e uso
O animationTimingFunction especifica a curva de velocidade da animação.
A curva de velocidade define o TEMPO que uma animação usa para mudar de um conjunto de estilos CSS para outro.
A curva de velocidade é usada para fazer as mudanças sem problemas.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por Moz especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintaxe
Retorne a propriedade animationTimingFunction:
object.style.animationTimingFunction
Defina a propriedade animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Valores de propriedade
Value | Description |
---|---|
linear | The animation has the same speed from start to end |
ease | Default value. The animation has a slow start, then fast, before it ends slowly |
ease-in | The animation has a slow start |
ease-out | The animation has a slow end |
ease-in-out | The animation has both a slow start and a slow end |
cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
Valor padrão: | facilidade |
---|---|
Valor de retorno: | Uma String, representando a propriedade de função de temporização de animação de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade animation-timing-function