La función linear()

Hasta el momento, hemos aprendido a utilizar los valores predefinidos como linear, ease, ease-in, ease-out o ease-in-out. Además, también hemos visto la forma de crear ritmos personalizados basados en curvas con la función cubic-bezier().

Sin embargo, en este capítulo veremos una forma de crear ritmos lineales personalizados, mediante la función linear().

La función `linear()`

Recientemente, se ha añadido una nueva función CSS que permite crear ritmos lineales personalizados. La idea es crear fragmentos de varios ritmos lineales diferentes, sin necesidad de crear múltiples animaciones diferentes.

Mediante la función linear(), podemos añadir una serie de parámetros variable, separados por comas, para indicar un número de pasos concreto. Estos parámetros son valores numéricos generalmente entre 0 y 1 (con decimales), que permitirán específicar exactamente la transición. También es posible indicar valores mayores que 1 o menores que 0.

¿Qué significa `linear()`?

En este caso, al contrario que con la función cubic-bezier(), la función linear() no utiliza curvas, sino que utiliza fragmentos lineales combinados. Observa que en el ejemplo, hemos dado 6 valores por parámetro a la función linear().

Los valores dados serán los que determinen en que momento de porcentaje de la animación se encontrará, donde 0 es 0% y 1 es 100%, permitiendo decimales:

La función linear() de CSS

De esta forma, podemos crear ritmos lineales personalizados.

Ejemplo en acción de `linear()`

Veamos ahora un ejemplo en acción, para tener clara la forma de realizar el ritmo lineal personalizado, en comparación con palabras clave como linear o ease. Observa el siguiente ejemplo donde tenemos tres elementos con la misma animación pero diferente ritmo:

Un elemento con ritmo linear
Un elemento con ritmo ease
Un elemento con el ritmo linear() del caso anterior

body {
  height: 300px;
}

.container {
  display: flex;
  gap: 1rem;
}

.element {
  width: 100px;
  height: 100px;
  background: indigo;
  animation: drop 5s forwards infinite;
}

.linear { animation-timing-function: linear }
.ease { animation-timing-function: ease }
.custom { animation-timing-function: linear(0, 1, 0.8, 1, 0.95, 1) }

@keyframes drop {
  to { translate: 0 200px; }
}

<div class="container">
  <div class="element linear"></div>
  <div class="element ease"></div>
  <div class="element custom"></div>
</div>

Expliquemos detalladamente el ritmo de la función linear():

Observa que tenemos una caja de 100x100 píxels. Dicha caja se va a mover desde su posición original a una posición 200px más abajo utilizando la propiedad CSS translate. Mediante la propiedad animation-timing-function vamos a modificar su ritmo. Ten en cuenta que lo he separado en varias líneas para que sea más fácil de explicar:

Fragmento 1: valores de 0 a 1. Desplazamiento desde 0px a 200px.
Fragmento 2: valores de 1 a 0.8. Desplazamiento desde 200px a 160px.
Fragmento 3: valores de 0.8 a 1. Desplazamiento desde 160px a 200px.
Fragmento 4: valores de 1 a 0.95. Desplazamiento desde 200px a 190px.
Fragmento 5: valores de 0.95 a 1. Desplazamiento desde 190px a 200px.