Background animado con CSS

Modificado por última vez en Domingo, 11 Agosto 2013 00:36
(0 votos)

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.


Comentarios (4)

This comment was minimized by the moderator on the site

Hola, si quiero escribir sobre ese fondo cómo se hace? cada vez que escribo se queda blanco el fondo

This comment was minimized by the moderator on the site

Esta excelente!
tengo el siguiente problema, la imagen se mueve excelente pero cuando termina de pasar la imagen, da un salto horrible para volver a empezar y se nota claro... c?mo podría corregir esto?

This comment was minimized by the moderator on the site

Si claro Mariana, puedes utilizarla para lo que quieras.
Saludos

This comment was minimized by the moderator on the site

Muchas gracias!
Puedo utilizar la imagen de nubes para una página web?

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento