Mostrando transiciones de imágenes como fondo con CSS

Mostrar transiciones suaves de imágenes en el fondo de una página HTML es realmente sencillo; realizar este tipo de transiciones es una práctica común en la web y en múltiples aplicaciones como Flipboard para Android; en esta entrada veremos una forma simple de realizar estas transiciones.

El truco aquí es emplear imágenes un poco más grandes a la resolución de la pantalla del usuario (monitor, tableta teléfono ,etc); como se te habría podido ocurrir…

Una buena idea

Consiste en emplear los media queries de CSS para seleccionar la imagen que mejor se adapte a la resolución del usuario.

¿Porqué emplear imágenes con mayor resolución de la pantalla?

Al colocar una imagen como fondo con mayor resolución que la pantalla:

Parte de la misma no es presentada o no se encuentra oculta, debido a que la pantalla no puede mostrar el total de la imagen; aun así es posible mostrar estas zonas ocultas empleando la propiedad:

background-position 

Dicha propiedad puede recibir hasta dos valores los cuales permite desplazar la imagen en los ejes horizontal:

Y vertical:

Para ello podemos emplear medidas como píxeles, porcentajes o incluso valores no numéricos como:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Por ejemplo:

background-position: right bottom;

Con esto en mente podemos mover fácilmente una imagen de un lado a otro de forma progresiva a través de las animaciones y empleando principalmente la propiedad vista anteriormente:

            @keyframes transitionImage {
                0% {background-position: right bottom;background-image: url('tigre.jpg');opacity:1;}
            20% {background-position: 0 0;opacity:0.5;background-image: url('chita.jpg');}

            30% {}

            35% {opacity:1;}
            50% {background-position:left bottom; opacity:0.5;background-image: url('leon.jpg');}

            60% {}

            65% {opacity:1;}
            80% {background-position:right top; opacity:0.5;background-image: url('tigre.jpg');}

            90% {}

            100% {background-position: right bottom;opacity:1;}
            }

Para simplificar el experimento anterior no emplearemos los media queries aunque pueden ser fácilmente adaptados al CSS presentado anteriormente; es decir, basta con definir el los @keyframes dentro de los media queries; un caso similar al cual aplicamos en la entrada ¿Cómo cubrir todo el fondo con una imagen con CSS?.