Smooth background-image Animation

Oliver Götze

Verfasst am 12.10.2016

Update 24.04.2025

Ein Kunde 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

HTML

									<div id="image">
	<div id="image-wrapper"></div>
</div>

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 tollen WordPress Webseite.

css

				.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 Like

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Smooth background-image Animation

Wenn dir der Beitrag Smooth background-image Animation gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.