Para poder entender y diferenciar entre estos 6 tipos (ease, linear, ease-in, ease-out, ease-in-outcubic-bezier) de «curvas de velocidad» de las transiciones CSS3 lo mejor es verlos en acción.
La propiedad transition-timing-function es la que se encarga de la curva de velocidad del efecto de transición.
Sitúate con el cursor encima de la siguiente caja para ver las transiciones:
En este ejemplo puedes ver las diferentes curvas de velocidad para cada una de estas transiciones.
El valor cubic-bezier, es el «master» de los efectos de transición, ya que es totalmente personalizable del modo: cubic-bezier(x, y, z, w). Hay varias herramientas online (http://cssglue.com/cubic) para generar la curva más fácilmente.
El html del ejemplo:
<div class="box-effect none">Ninguna</div> <div class="box-effect ease">ease</div> <div class="box-effect ease-in">ease-in</div> <div class="box-effect ease-out">ease-out</div> <div class="box-effect ease-in-out">ease-in-out</div> <div class="box-effect linear">linear</div> <div class="box-effect cubic-bezier">cubic-bezier</div>
CSS del ejemplo:
.box-effect.ease { -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; } .box-effect.ease-in { -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -o-transition: all 3s ease-in; transition: all 3s ease-in; } .box-effect.ease-out { -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out; -o-transition: all 3s ease-out; transition: all 3s ease-out; } .box-effect.ease-in-out { -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .box-effect.linear { -webkit-transition: all 3s linear; -moz-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; } .box-effect.cubic-bezier { -webkit-transition: all 3s cubic-bezier(1, -0.5, 0.5, 1); -moz-transition: all 3s cubic-bezier(1, -0.5, 0.5, 1); -o-transition: all 3s cubic-bezier(1, -0.5, 0.5, 1); transition: all 3s cubic-bezier(1, -0.5, 0.5, 1); }
pd: La propiedad transition-timing-function no es compatible en IE9 y inferiores.
Agradezco tu comentario 🤘