Propriedade Função de Temporalização da Animação
Última atualização: 2026-09-13
animation-timing-function Propriedade Função de Temporalização da Animação
A propriedade animation-timing-function define como a velocidade de uma animação muda ao longo do tempo — se ela corre em ritmo constante, começa rápido e desacelera, ou parece elástica. Ao controlar a distribuição temporal dos quadros intermediários, faz o movimento parecer mais físico ou mais estilizado, e é uma propriedade chave para uma qualidade de animação polida.
| Categoria | |
|---|---|
| Valor Inicial | ease |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>);⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps() | cubic-bezier() | Palavra-chave | A curva de velocidade da animação |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-timing-function | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Dica： cubic-bezier() permite definir qualquer curva Bezier personalizada; ferramentas como cubic-bezier.com a visualizam interativamente. steps() é usado para animações quadro a quadro, como folhas de sprite.
Dica： ease é o padrão e se comporta como lento-rápido-lento. linear em velocidade constante convém para rotação contínua; ease-out é comum quando elementos entram na tela e ease-in quando saem.
❓ Perguntas Frequentes
Qtransition-timing-function é o mesmo que animation-timing-function?
AOs valores aceitos são idênticos — ease, linear, cubic-bezier(), steps() e assim por diante — mas atuam em coisas diferentes: o primeiro se aplica a transições, o segundo a animações. Ambos controlam a relação entre tempo e progresso, não distância e velocidade, então o mesmo valor cubic-bezier produz o mesmo efeito nos dois lugares.
QComo crio um efeito elástico ou saltitante com cubic-bezier?
AUse cubic-bezier() com valores y que ficam fora do intervalo 0-1, por exemplo cubic-bezier(0.68, -0.55, 0.27, 1.55). Quando a curva ultrapassa o intervalo, o elemento passa do valor alvo primeiro e depois volta, produzindo uma sensação elástica. Essas curvas de overshoot combinam com interações animadas, como botões saltitantes e entradas de pop-up.
QComo escrevo uma animação steps() quadro a quadro e quando devo usá-la?
Asteps(n) divide a animação em n segmentos iguais, e o valor pula entre os segmentos em vez de interpolar continuamente. Combinado com uma folha de sprite, produz animação quadro a quadro, onde cada quadro dura duration / n. jump-start mantém o primeiro quadro, jump-end mantém o último, e step-start/step-end são as formas abreviadas.
QQual é a diferença entre ease, ease-in, ease-out e linear, e quando uso cada um?
Aease (o padrão) começa rápido e termina devagar, uma boa escolha para uso geral. ease-in começa devagar e acelera, encaixando em elementos que saem da tela. ease-out começa rápido e desacelera, encaixando em elementos que entram — como pop-ups e cartões deslizando para dentro. ease-in-out é devagar em ambas as pontas, bom para efeitos em loop como luzes de respiração. linear é velocidade constante do início ao fim, ideal para rotações e barras de progresso.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
