CSS 3 - Transiciones para cambio de tamaño.

¿Has notado que si redimensionas la ventana del navegador con Gmail abierto los distintos elementos de la pantalla cambian automáticamente de tamaño en una animación suave?.

Esto se puede realizar utilizando JavaScript o jQuery, pero también se puede lograr usando las Transiciones CSS3 y selectores @media.

Hacerlo con CSS3 recrea del mismo modo las animaciones de las transiciones como con jQuery pero es infinitamente mucho más fácil, con menos código y más legible.

Veremos ahora entonces como hacerlo con CSS3

Introducción a los selectores @media.

Si ya tienes un diseño responsivo probablemente estes familiarizado con los @media.Si no estás familiarizado, son esencialmente una forma de aplicar clases CSS específicos para diferentes tipos de pantalla y resoluciones. Esto significa que puedes tener el mismo sitio y contenidos adaptados a un aspecto completamente diferente dependiendo del tamaño de la pantalla y dispositivo que la esté reproduciendo. Podés ver una lista completa de estas propiedades haciendo clic acá.

Acá va un ejemplo de ello:

@media only screen and (min-width: 480px) { } 
@media only screen and (min-width: 600px) { } 
@media only screen and (min-width: 768px) { } 
@media only screen and (min-width: 992px) { } 
@media only screen and (min-width: 1382px) { }

Dentro de las llaves de cada @media irán los estilos de todos los elementos de la página para ese tamaño de pantalla. Si querés que algún estilo seaEl ejemplo anterior dará como resultado distintas distribuciones según el tamaño de pantalla:

Transiciones CSS3

Las Transiciones CSS3 cambian el comportamiento de un cambio de estilo o de propiedad. Así se combierte en una animación. Puedes hacer una transición para la propiedad "width" y siempre que un elemento cambie su ancho, se activará la animación durante un tiempo específico.Puedes utilizar transiciones para cambiar muchisimas de otras propiedades como alto, ancho, color de fonto.

En éste tutorial se realizó lo siguiente: En las resoluciones más grandes la página se dividió en dos columnas (la navegación a la izquierda y el contenido a la derecha) mientras el encabezado va en la parte superior. Usando los @media en las pantallas más pequeñas la navegación se encuentra en la parte superior y el contenido en la inferior.Utilizando la siguiente clase CSS3, cuando el navegador cambia de tamaño, los elementos cambian de tamaño también pero de forma animada por un tiempo determinado: 1 segundo el ancho y 1.5 segundos a la izquierda):

section, h1, li, img { -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out; -webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out; -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out; -o-transition: width 1s ease-in-out, left 1.5s ease-in-out; transition: width 1s ease-in-out, left 1.5s ease-in-out; }

Podes ver un ejemplo de este código funcionando aquí. Intentá cambiar el tamaño de tu navegador para ver las diferentes animaciones.

Podes descargar el html y .css completos haciendo cilc acá