Beispiel 2

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

.box div {
	width: 100px;
	height: 100px;
	border: 1px solid #000000;
	margin: 0;
	padding: 5px;
	text-align: center;
	position: relative;
	left: 0px;

	animation-name: bewegdich;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes bewegdich {
	from, to {
		left: 0px;
		top: 0px;
		background: red;
	}
	25% {
		left: 0px;
		top: 388px;
		background: yellow;
	}
	50% {
		left: 388px;
		top: 388px;
		background: green;
	}
	75% {
		left: 388px;
		top: 0px;
		background: blue;
	}
}