Uno de los aspectos más interesantes, poderosos y vistosos que trajo CSS3 es el uso de las transiciones que son pasos de transición de un estado a otro de manera progresiva y suave; mediante esta característica podemos realizar efectos muy vistosos con pocas líneas de código CSS con las cuales podemos alterar el tamaño (width y/o height), espaciado (margin y/o padding) color (color y/o background inclusive los degradados), bordes, opacidad (opacity) y en resumen cualquier propiedad con su valor asignado que aplique una forma o estilo a un elemento o grupo de elementos mediante el hover o focus tal cual veremos en esta entrada.

Con la propiedad Transition podemos hacer efectos que permiten que un elemento cambie gradualmente (en un tiempo determinado) de un estilo a otro; si deseas realizar una animación como por ejemplo aumentar algún elemento de tamaño, cambiar su color; con aplicar ciertas reglas CSS sobre ese elemento obtendrás una animación; veamos los principios básicos:

• Aplicar el estilo básico al elemento (en caso de ser necesario).
• Especificar la propiedad de cambio con transition-property.
• Especificar la propiedad de duración de la animación con transition-duration.
• Por último especificamos un valor de cambio a la propiedad seleccionada; generalmente utilizamos la propiedad :hover o :focus.

Esto es todo, con tan solo establecer estos sencillos pasos el navegador al interpretar nuestras reglas CSS hará el resto, el trabajo duro.

Funcionamiento básico de transition-property

Como ya mencionamos; con esta propiedad especificamos la propiedad a la que se le aplicará el cambio progresivo de un estado a otro; por ejemplo si queremos que nuestra propiedad de cambio sea el width debemos de aplicar:

transition-property: width;

Si deseamos especificar más de una propiedad, solo las debemos separar por comas:

transition-property: width,height; 

En este último caso tanto la propiedad width cómo la propiedad height fueron especificadas como propiedades de cambio.

Funcionamiento básico de transition-duration

Con este selector debemos de especificar el tiempo que durará la animación o transición de un estado a otro; y esto lo podemos hacer ya sea en segundos (s) o en milisegundos (ms); veamos un ejemplo:

transition-duration: 1000ms; 

En el ejemplo anterior, indicamos que la transición duraría 1000 milisegundos, o lo que es lo mismo un segundo:

transition-duration: 1s; 

Propiedad transition reducida o resumida

Como ocurre con prácticamente todas las propiedades CSS, la propiedad transition cuenta con una propiedad resumida o acortada en la cual podemos indicar cada una de los valores que vimos anteriormente:

transition: propiedad duración función retraso;

El retraso o delay es opcional y permite retrasar en segundos o milisegundos el efecto de transición; también cuenta con una propiedad especifica transition-delay por ejemplo podemos emplear la siguiente regla:

transition: background 3s ease;

Funciones de intervalos de transición

las funciones para la transición permite definir en un intervalo como queremos que fluya la animación, como explicamos en una entrada:

En la cual hablamos de las curvas de bezier, que es una manera muy común en la cual definimos cómo queremos que se comporte (a nivel de tiempo) las animaciones, aunque en este caso las transiciones, que vienen siendo un equivalente de este, pero con algunas diferencias fundamentales.

• Linear: el movimiento siempre va a la misma velocidad (constante); equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0).
• Ease: empieza despacio, acelera y termina rápido; equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0).
• Ease-in: empieza despacio y agarra una velocidad constante; equivalente a: cubic-bezier(0.42, 0, 1.0, 1.0).
• Ease-out: termina despacio; equivalente a: cubic-bezier(0, 0, 0.58, 1.0).
• Ease-in-out: empieza despacio y termina despacio; equivalente a: cubic-bezier(0.42, 0, 0.58, 1.0).

Ejemplos sencillos de transiciones

En este primer ejemplo veremos cómo aumentar el tamaño de un elemento; y esto lo hacemos empleando transition-property: width,height:

En este otro veremos cómo cambiar el color de un elemento y esto lo hacemos especificando transition-property: background:.

En este otro veremos cómo mover o reubicar un elemento utilizando la propiedad transition-property sobre la propiedad left; pero no ocurrirá lo mismo con la propiedad background la cual NO la agregamos en la propiedad transition-property.

Este ejemplo es poco práctico, ya que para que se activen las transiciones en todos los casos es necesario la presencia de estado hover, lo que quiere que debemos de posicionar el cursor del ratón encima del elemento (o grupo de elementos) en cuestión para que funcione la transición; sin embargo ser la regla indicar que el elemento se desplace de una posición a otra, se pierde el foco sobre el mismo dando como resultados algunos comportamientos erráticos como podrás consultar tu mismo si abres la web por ejemplo ej Google Chrome y/o en Firefox que se ejecutan de manera incorrecta y difieren entre sí.

Conclusión

Como pudimos ver a lo largo del artículo; esta propiedad la podemos utilizar cuando deseemos realizar transiciones graduales entre distintos estilos aplicados a un elemento en instantes de tiempo distintos sin utilizar una sola línea de JavaScript; es perfecta para aplicarla galerías de imágenes, menús de navegación con sub-menus, etc, ya que mejora notablemente la experiencia que el usuario pueda tener.

Si te quedaste con ganas de más, puedes revisar los siguientes artículos en donde encontrarás diversos ejemplos:

Allí podrás ver efectos reversibles, que básicamente son aquellos que hace rotar el elemento sobre su eje ya sea para simular abrir una puerta o mostrar marcadores; también como crear checkbox con una transición al momento de pasar de activo a inactivo y otra función muy interesante que no hemos abordado en este tutorial que es el uso de la función step para marcar el número de pasos necesarios para completar la transición; todo esto con ejemplos detallados.

Para ver la lista completa, lo puedes hacer en:

Transiciones ejemplos