Un poco más sobre las transiciones con CSS

Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:

transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:

transition-property: background;
transition-property: background-color;
transition-property: background, width;

Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:

<div class="demoT">CSS3</div>

<style>
.demoT {
  /* todas las propiedades normales que quiera poner */
  background-color:#101921;
  border: 6px solid #89A;
  border-radius: 10px;
  color: #EEE;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  width: 100px;
  /* acá irá la transición */
}
.demoT:hover {
  /* estas son las propiedades que van a cambiar */
  background-color: #606971;
  border-radius: 150px;
  color: #000;
  font-size:64px;
  height: 200px;
  padding-top: 100px;
  width: 300px;
  /* acá irá la transición */
</style>

en lugar de agrega esto para animarlo un poco:

transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;

puedo simplificarlo así:

transition-property: all;
transition-duration: 2s;

o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:

transition: all 2s;

El orden es:

transition: transition-property, transition-duration transition-timing-function transition-delay;

Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:

-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;

CSS3

Cuando queremos anular la transición lo que utilizamos es el valor none:

transition: none;

transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:

transition-duration: 1s;
transition-duration: 1s, 2s;

transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:

ease

linear

ease-in

ease-out

ease-in-out

cubic

Por último:

transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.

Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:

-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ