Estaba estudiando la propiedad transition-timing-function
para controlar la velocidad de la transicion a través de su duración.
Lo que he entendido de lo que he investigado es que con esa función se puede controlar que tanto en velocidad una transicion debería progresar hasta cierto punto en el tiempo de su duración.
Pero he visto que puede utilizar valores negativos. Como este ejemplo:
<div>
Soy la caja
</div>
div{
width: 200px;
height: 100px;
background-color: lightgreen;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55)
}
div:hover{
width: 100px;
}
Entonces la primera coordenada establece que en el 68%
del tiempo de la transición se debería haber progresado -55%
de todo el cambio que se debe de hacer, el ancho en este caso... Aquí mi suposición no tiene mucho sentido ya creo, por lo que se esta dando un valor negativo osea que si sigo con mi interpretación es como decir que en el 68%
de la duración se debería haber progresado un -55%
del ancho que se tiene que cambiar.
Cuando me refiero al ancho que se tiene que cambiar quiero decir que si el ancho originalmente estaba en 100px
y el hover lo cambia a 200px entonces el 100% de todo el cambio que se observara en toda la transicion vendria siendo 100px
(el total de el ancho que se necesita para llegar a los 200px
destino)
¿Qué es lo que significan estas coordenadas que proporciono, o en que me equivoco al interpretar su funcionamiento?, mi suposición anterior era porque en las gráficas de ejemplo con las que me he topado, el eje de las y
representaban todo el cambio de la propiedad (por ejemplo todo el ancho que se tiene que reducir o aumentar a traves de toda la transición) y el de las x
todo el tiempo que durará la transición.