Smooth background-image Animation

Ein Kunde wollte von mir wollte auf der Startseite ein Fullscreen-Image positioniert haben auf dem mittig ein weißer Text zu lesen sein sollte. Kein Problem – sollte er bekommen. Irgendwann erhielt ich dann den Anruf, dass es ihm zu langweilig sei und er gerne etwas Bewegung haben möchte. Wie also animiert man ein Bild?

Smooth Background Animation mit -webkit-keyframes

HTML
CSS

div#image {
	width: 90%;
	height: 200px;
	overflow: hidden;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin: 50px 5%;
}
div#image-wrapper {
	background-image: url('http://revilodesign.de/media/thailand-maya-beach-longtail.jpeg');
	background-color: #F1F1F1;
	background-repeat: no-repeat;
	background-size: 140%;
	width: 100%;
	height: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	position: relative;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%;
	}
	to { 
		background-position: 100% 0%;
	}
}

Dank der -webkit-keyframes hatte ich schnell die passende Lösung. Ich ließ das Bild immer wieder von links nach rechts bewegen. Somit hatte der Kunde seine gewünschte Bewegung auf der Webseite.

.yourClass {
	background-color: #F1F1F1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%
	}
	to { 
		background-position: 100% 0%
	}
}

1 Kommentar