Clicky

Background animado con CSS

Background animado con CSS

El CSS puede hacerse cargo de las tareas de animación basadas en JavaScript

Las animaciones de fondo son un toque impresionante cuando se usan correctamente. En el pasado se solía usar MooTools para animar una posición background. Por suerte hoy en día las animaciones CSS están ampliamente soportadas lo suficiente como para confiar en ellas para hacerse cargo de las tareas de animación basadas en JavaScript. Los siguientes sencillos fragmentos de CSS animan la imagen de fondo (a través de la posición de fondo) de un elemento dado.

El CSS

Usaremos para este efecto animaciones CSS en lugar de transiciones:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

Con el código de animación en su lugar, ahora es el momento de aplicarlo a un elemento de una imagen de fondo:

#animate-area	{ 
	width: 560px; 
	height: 400px; 
	background-image: url(nubes.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	animation: animatedBackground 40s linear infinite;
}

La imagen de fondo de las nubes en el elemento del ejemplo se desplazan elegantemente y sin problemas de izquierda a derecha con una duración de 40 segundos, repitiéndose un número infinito de veces.

Lo mejor es que no tenemos que usar JavaScript para manejar estas animaciones. ¿Más?, por supuesto, el lío de los prefijos de proveedores para llevar a cabo la animación es una mierda, pero al menos las animaciones son mucho más eficientes y más fáciles de configurar!

Ver demostración: Fondo de nubes animado con CSS

Este es el código fuente completo del estilo CSS:

	@keyframes animatedBackground {
		from { background-position: 0 0; }
		to { background-position: 100% 0; }
	}
	@-webkit-keyframes animatedBackground {
		from { background-position: 0 0; }
		to { background-position: 100% 0; }
	}
	@-ms-keyframes animatedBackground {
		from { background-position: 0 0; }
		to { background-position: 100% 0; }
	}
	@-moz-keyframes animatedBackground {
		from { background-position: 0 0; }
		to { background-position: 100% 0; }
	}
	#animate-area	{ 
		width: 560px; 
		height: 400px; 
		background-image: url(nubes.png);
		background-position: 0px 0px;
		background-repeat: repeat-x;
		animation: animatedBackground 40s linear infinite;
		-ms-animation: animatedBackground 40s linear infinite;
		-moz-animation: animatedBackground 40s linear infinite;
		-webkit-animation: animatedBackground 40s linear infinite;
	}

El archivo gráfico nubes.png lo podéis descargar desde aquí.

Ver demostración: Fondo de nubes animado con CSS - En este segundo ejemplo hemos colocado un pequeño avión volando sobre las nubes que le da una apariencia de movimiento muy conseguida.

Jesus_Caceres