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%
	}
}

revilodesign oli

1 Kommentar

Schreibe ein Kommentar zu Smooth background-image Animation

  1. avatar scater61scater61 sagt:

    geniale Idee – danke!!!

Hinterlasse ein Kommentar zum Beitrag "Smooth background-image Animation"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Follow Me

doch mal auf Instagram