Propiedad CSS animation-timing-function
La propiedad animation-timing-function define cómo progresará la animación durante la duración de cada ciclo, no a lo largo de toda la animación. Especifica la curva de velocidad de la animación que define el tiempo necesario para que una animación cambie de un conjunto de estilos a otro.
Las funciones de temporización definen la interpolación entre las paradas de fotogramas clave. Si no se especifica una función de temporización para un intervalo, se utiliza el valor animation-timing-function del elemento.
La propiedad animation-timing-function es una de las propiedades CSS3.
Puede asumir los siguientes valores:
ease- (predeterminado) Comienza lentamente, luego se acelera y termina lentamente.ease-in- Comienza lentamente, pero se acelera al final.ease-out- Comienza rápidamente, pero se desacelera al final.ease-in-out- Comienza lentamente y termina lentamente.step-start- Equivalente asteps(1, start).step-end- Equivalente asteps(1, end).linear- La animación tiene la misma velocidad durante toda la animación, a menudo es mejor usarla para cambios de color u opacidad.steps(int, start|end)- Especifica una función de pasos con dos parámetros. El primer parámetro define el número de intervalos en la función. Debe ser mayor que 0. El segundo parámetro es el valor "start" o "end", y especifica el punto en el que ocurre el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se usa "end".cubic-bezier(n,n,n,n)- Especifica valores personalizados para la función cubic-bezier. Los primeros dos parámetros definen las coordenadas X y deben estar entre 0 y 1. Los últimos dos parámetros definen las coordenadas Y y pueden ser cualquier número.
Cuando se especifican varios valores separados por comas, se asignan a las animaciones correspondientes definidas en animation-name en orden. Si hay menos funciones de temporización que animaciones, la lista se repite para igualar el conteo.
| Valor inicial | ease |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a los pseudo-elementos ::before y ::after. |
| Heredado | No |
| Animable | No |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationTimingFunction = "linear"; |
Sintaxis
Sintaxis de la propiedad 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;Ejemplo de la propiedad animation-timing-function con el valor "ease":
Ejemplo de la propiedad CSS animation-timing-function con el 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>Ejemplo de la propiedad animation-timing-function con el valor "ease-in":
Ejemplo de la propiedad CSS animation-timing-function con el 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>Ejemplo de la propiedad animation-timing-function con diferentes funciones de temporización:
Ejemplo de la propiedad CSS animation-timing-function con los valores linear, ease, ease-in, ease-out y 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 | Descripción | Reproducir |
|---|---|---|
| ease | La animación comienza lentamente, luego se acelera y termina lentamente. Este es el valor predeterminado. | Reproducir » |
| linear | Procede a velocidad constante durante toda la animación. | Reproducir » |
| ease-in | La animación comienza lentamente, pero se acelera al final. | Reproducir » |
| ease-out | La animación comienza rápidamente, pero se desacelera al final. | Reproducir » |
| ease-in-out | La animación comienza lentamente y termina lentamente. | Reproducir » |
| step-start | Equivalente a steps(1, start). | |
| step-end | Equivalente a steps(1, end). | |
| steps(int,start|end) | Especifica una función de pasos con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser mayor que 0. El segundo parámetro es el valor "start" o "end", y especifica el punto en el que ocurre el cambio de valores dentro del intervalo. Si no se aplica el segundo parámetro, se asigna el valor "end". | |
| cubic-bezier (n,n,n,n) | Define los valores mediante la función cubic-bezier. Los primeros dos parámetros son coordenadas X (0 a 1), y los últimos dos son coordenadas Y (pueden ser cualquier número). | |
| initial | Hace que la propiedad use su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué especifica la propiedad CSS animation-timing-function?