0

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.

1
  • 1
    Es como crear una linea curvilínea, aquí muestra ejemplos de manera gráfica y visual Commented el 22 dic. 2019 a las 0:58

1 respuesta 1

1

Para realizar un efecto con cubic-beizer debes tener en cuenta que los cuatro parámetros que lo componen hacen referencia a la posición y el tiempo de la animación. El primero de ellos, es el punto de partida, el segundo la posición que debe ocupar dentro del total un una vez transcurrido el tiempo definido, el tercero es el tiempo final de la animación y el cuarto la posición final. En este caso el ejemplo funciona sobre el hover en el div de color verde.

div {
  width: 150px;
  height: 25px;
  background: green;
  color:#fff;
  padding:6px;
  transition: width 1.5s;
  transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);
  cursor:pointer;
}

div:hover {
  width:450px;
}
<div>ME EXPANDO</div>

Debes tener muy encuenta que los valores que le des siempre deben ser numéricos y en concreto las posiciones 1 y 3 deben estar siempre entre 0 y 1.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.