/* CSS Animationen mit Hilfe der Keyframes-Methode */

/* 
transform: (Umwandeln/verändern)
Position - translateX() u. translateY()
Drehen - rotate()
Skalieren - scale()
Verzerren/Neigen - skew()
*/

/* Definition für die Bewegung */
@-webkit-keyframes laufen {
	from {
		transform: translateX(725px);
	}
	to {
		transform: translateX(10px);
	}
}
@-moz-keyframes laufen {
	from {
		transform: translateX(725px);
	}
	to {
		transform: translateX(10px);
	}
}
@-o-keyframes laufen {
	from {
		transform: translateX(725px);
	}
	to {
		transform: translateX(10px);
	}
}
@keyframes laufen {
	from {
		transform: translateX(725px);
	}
	to {
		transform: translateX(10px);
	}
}

/* Auslöser fur die Bewegung */
#schaf {
	-webkit-animation-name: laufen;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
}
#schaf {
	-moz-animation-name: laufen;
	-moz-animation-duration: 7s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
}
#schaf {
	-o-animation-name: laufen;
	-o-animation-duration: 7s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
}
#schaf {
	animation-name: laufen;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	margin-top: -3.6%;
}