Beispiel 1

#test1

#test2

#test3

#test4

Die Boxen #test2 und #test4 unterscheiden sich nur in Chromium/Chrome ab Version 19.0 und Firefox ab Version 16.0 von #test1!

Hier der zugehörige CSS-Code:

.box {
	background: #dddddd;
	font-size: 100%;
	border: 1px solid #000000;
	width: 500px;
	padding: 5px 5px 0;
	color: #000000;
}


.box div {
	width: 100px;
	background: #aaaaaa;
	border: 1px solid #000000;
	margin: 5px 0;
	padding: 5px;
	text-align: center;
	position: relative;
	left: 0px;
	
	animation-name: bewegdich;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#test1 {
	animation-direction: normal;
}

#test2 {
	animation-direction: reverse;
}

#test3 {
	animation-direction: alternate;
}

#test4 {
	animation-direction: alternate-reverse;
}

@keyframes bewegdich {
	0% {
		left: 0px;
	}
	100% {
		left: 400px;
	}
}