Hasta ahora hemos visto como crear transiciones y animaciones, pero no hemos modificado el ritmo o la aceleración de la misma. En este artículo vamos a ver las funciones de tiempo, que son un mecanismo que sirve para cambiar o variar ese ritmo de la animación.
Las funciones de tiempo en CSS
Tanto cuando hablamos de transiciones como cuando hablamos de animaciones tenemos dos propiedades que se aplican exactamente igual y se encargan de definir el ritmo o transcurso de la animación o transición en cuestión: transition-timing-function que aplica a transiciones, y animation-timing-function que aplica a animaciones.
Cada una de estas propiedades permite indicar el ritmo de la transición/animación, utilizando diferentes valores:
| Tipo de valor | Descripción | Más info |
|---|---|---|
Palabra clave predefinida (linear, ease, etc...) | Establece un ritmo predefinido en CSS. | (Este artículo) |
Función de tiempo cubic-bezier() | Establece un ritmo personalizado. | Ver cubic-bezier() |
Función de tiempo linear() | Establece un ritmo lineal personalizado. | Ver linear() |
Función de tiempo steps() | Establece un ritmo escalonado personalizado. | Ver steps() |
En cualquiera de las mencionadas dos propiedades se puede indicar el ritmo de la transición/animación en cuestión, utilizando uno de estos 4 tipos de valores.
Valores predefinidos
Quizás, la forma más sencilla de indicar el ritmo de una animación, sería especificar una de las siguientes palabras clave predefinidas (valores) que existen para indicar en las propiedades anteriores:
| Palabra clave predefinidad | Significado |
|---|---|
linear | Ritmo constante, siempre al mismo ritmo. |
ease | Ritmo muy rápido al principio, ralentizado al final. Por defecto. |
ease-in | Ritmo lento al principio, rápido al final. |
ease-out | Ritmo rápido al principio, lento al final. |
ease-in-out | Ritmo rápido, lento en los extremos (combinación de los dos anteriores). |
Cada una de estas palabras clave establecerá el ritmo de la animación o transición en cuestión. Observa los siguientes ejemplos, donde modificamos el ritmo de la animación de un rectángulo creciendo en ancho:
Si no se indica ninguna función de tiempo concreta, CSS utilizará la función de tiempo ease, que es la función de tiempo por defecto. Sin embargo, podemos utilizar cualquiera de las anteriores.
- La función de tiempo
lineares la más sencilla de entender: va siempre al mismo ritmo: constante. - La función de tiempo
ease, comienza rápidamente y se va ralentizando. - Las funciones de tiempo
ease-inyease-outson variaciones que van más lento al principio o al final. - La función de tiempo
ease-in-outes una mezcla de las dos anteriores.
Veamos un ejemplo más en acción, utilizando el desplazamiento con la propiedad translate:
.element {
--size: 100px;
width: var(--size);
height: var(--size);
color: white;
font-size: 0.9rem;
border-radius: 50%;
margin: 5px;
display: grid;
place-items: center;
background: indigo;
animation: move 5s alternate infinite;
}
@keyframes move {
to { translate: 600px; }
}
.ease { animation-timing-function: ease; }
.linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
<div class="element ease">ease</div>
<div class="element linear">linear</div>
<div class="element ease-in">ease-in</div>
<div class="element ease-out">ease-out</div>
<div class="element ease-in-out">ease-in-out</div>
En el caso de que ninguna de estas palabras claves predefinidas nos ofrezca el ritmo que buscamos, tendríamos que optar por alguna de las funciones de tiempo personalizadas que veremos a continuación.
