En el artículo anterior vimos las palabras clave predefinidas como linear, ease, ease-in, ease-out o ease-in-out para ajustar el ritmo de una animación. En este artículo vamos a aprender a utilizar la función cubic-bezier() que nos permitirá crear nuestros propios ritmos de animación personalizados.
Función cubic-bezier()
La función de tiempo cubic-bezier() es una función personalizada, donde podemos indicar 4 valores concretos que definirán el ritmo deseado para la transición o animación.
Observa la siguiente tabla de equivalencia, donde muestro los valores equivalente a las palabras clave predefinidas que aprendimos en el artículo anterior:
| Valor | Equivalente en cubic-beizer |
|---|---|
linear | cubic-bezier(0, 0, 1, 1) |
ease (valor por defecto) | cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in | cubic-bezier(0.42, 0, 1, 1) |
ease-out | cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
| Transición personalizada | cubic-bezier(A, B, C, D) |
Así pues, en las propiedades animation-timing-function y transition-timing-function podemos especificar la función cubic-bezier() mencionada con los valores numéricos deseados.
¿Qué significa cubic-bezier()?
El formato de la función es cubic-bezier(A, B, C, D), como hemos visto, tiene 4 parámetros: A, B, C y D, donde cada uno de esos números indican lo siguiente:
| Parámetro | Valor | Descripción | Pertenece a |
|---|---|---|---|
A | X1 | Eje X del primer punto que orienta la curva bezier. | P1 |
B | Y1 | Eje Y del primer punto que orienta la curva bezier. | P1 |
C | X2 | Eje X del segundo punto que orienta la curva bezier. | P2 |
D | Y2 | Eje Y del segundo punto que orienta la curva bezier. | P2 |
Observa en el siguiente gráfico que tenemos dos puntos colocados: P1 y P2. El punto P1 está formado por el valor (x, y), que es (0.1, 0.7). Por otro lado, el punto P2 está formado por el valor (x, y), que es (0.8, 0.4).
La curva que se forma desde (0,0) hasta (1,1) es lo que llamamos curva bezier, y la que representa el ritmo de la animación o transición:
Ejemplo en acción de cubic-bezier()
Veamos el siguiente ejemplo, donde vamos a comparar una animación realizada con la palabra clave predefinida linear y otra con la función cubic-bezier() definida en el ejemplo anterior.
Así pues, observa el siguiente fragmento de código:
.element {
width: 200px;
height: 100px;
margin: 5px;
background: deeppink;
color: white;
display: grid;
place-items: center start;
padding-left: 2rem;
animation: animated 5s infinite alternate;
}
@keyframes animated {
to { width: 500px; }
}
.linear { animation-timing-function: linear; }
.cubic-bezier { animation-timing-function: cubic-bezier(0.1, 0.7, 0.8, 0.4); }
<div class="element linear">linear</div>
<div class="element cubic-bezier">cubic-bezier</div>
También ten en cuenta que los valores de cada parámetro A, B, C y D pueden ser menores a 0 o mayores a 1, aunque no sea lo habitual. Puedes probar los resultados en la web de ejemplo que tenemos a continuación.
Todo esto se puede ver muy fácilmente usando la herramienta Cubic Bezier, donde puedes crear de forma interactiva el ritmo de las transiciones o animaciones, con los parámetros deseados.
