Propriedade CSS animation-timing-function
animation-timing-function é uma propriedade CSS que define a velocidade de uma animação ao longo da duração de cada ciclo.
A propriedade animation-timing-function define como a animação irá progredir ao longo da duração de cada ciclo, e não ao longo de toda a animação. Especifica a curva de velocidade da animação, definindo o tempo necessário para que uma animação mude de um conjunto de estilos para outro.
As funções de temporização definem a interpolação entre as paragens dos keyframes. Se não for especificada uma função de temporização para um intervalo, é utilizado o valor de animation-timing-function do elemento.
A propriedade animation-timing-function é uma das propriedades CSS3.
Pode assumir os seguintes valores:
ease- (predefinição) Começa lentamente, depois fica mais rápida e termina lentamente.ease-in- Começa lentamente, mas acelera no fim.ease-out- Começa rapidamente, mas abranda no fim.ease-in-out- Começa lentamente e termina lentamente.step-start- Equivale asteps(1, start).step-end- Equivale asteps(1, end).linear- A animação mantém a mesma velocidade ao longo de toda a animação; é muitas vezes a melhor opção para alterações de cor ou opacidade.steps(int, start|end)- Especifica uma função em degraus com dois parâmetros. O primeiro parâmetro define o número de intervalos na função e tem de ser maior do que 0. O segundo parâmetro é o valor "start" ou "end" e especifica o ponto em que ocorre a mudança de valores dentro do intervalo. Se o segundo parâmetro for omitido, é utilizado "end".cubic-bezier(n,n,n,n)- Especifica valores personalizados para a função cubic-bezier. Os dois primeiros parâmetros definem as coordenadas X e têm de estar entre 0 e 1. Os dois últimos definem as coordenadas Y e podem ser qualquer número.
Quando são especificados vários valores separados por vírgula, estes correspondem por ordem às animações definidas em animation-name. Se houver menos funções de temporização do que animações, a lista é repetida para corresponder ao número.
| Valor inicial | ease |
|---|---|
| Aplica-se a | Todos os elementos. Aplica-se também aos pseudo-elementos ::before e ::after. |
| Herdada | Não |
| Animável | Não |
| Versão | CSS3 |
| Sintaxe DOM | object.style.animationTimingFunction = "linear"; |
Sintaxe
Sintaxe da propriedade CSS animation-timing-function
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;Exemplo da propriedade animation-timing-function com o valor "ease":
Exemplo da propriedade CSS animation-timing-function com o valor ease
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
animation: element 5s infinite;
animation-timing-function: ease;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Exemplo da propriedade animation-timing-function com o valor "ease-in":
Exemplo da propriedade CSS animation-timing-function com o valor ease-in
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
animation: element 7s infinite;
animation-timing-function: ease-in;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>Exemplo da propriedade animation-timing-function com diferentes funções de temporização:
Exemplo da propriedade CSS animation-timing-function com os valores linear, ease, ease-in, ease-out e ease-in-out
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
animation: mymove 5s infinite;
}
#div1 {
animation-timing-function: linear;
}
#div2 {
animation-timing-function: ease;
}
#div3 {
animation-timing-function: ease-in;
}
#div4 {
animation-timing-function: ease-out;
}
#div5 {
animation-timing-function: ease-in-out;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| ease | A animação começa lentamente, depois fica mais rápida e termina lentamente. É o valor predefinido. | Experimente » |
| linear | Decorre a uma velocidade constante ao longo de toda a animação. | Experimente » |
| ease-in | A animação começa lentamente, mas fica mais rápida no fim. | Experimente » |
| ease-out | A animação começa rapidamente, mas abranda no fim. | Experimente » |
| ease-in-out | A animação começa lentamente e termina lentamente. | Experimente » |
| step-start | Equivale a steps(1, start). | |
| step-end | Equivale a steps(1, end). | |
| steps(int,start|end) | Especifica uma função em degraus com dois parâmetros. O primeiro parâmetro especifica o número de intervalos na função e tem de ser maior do que 0. O segundo parâmetro é o valor "start" ou "end" e especifica o ponto em que ocorre a mudança de valores dentro do intervalo. Se o segundo parâmetro não for aplicado, é atribuído o valor "end". | |
| cubic-bezier (n,n,n,n) | Define os valores através da função cubic-bezier. Os dois primeiros parâmetros são coordenadas X (0 a 1) e os dois últimos são coordenadas Y (podem ser qualquer número). | |
| initial | Faz com que a propriedade utilize o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |