css3_keyframe.css

<style>
div {
	width: 100px;
	height: 100px;
	background-color: #990;
	position: absolute;
	left: 0;
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
	animation-name: example;
	animation-duration: 4s;
}
.vv {
	width: 100px;
	height: 100px;
	background-color: #137bad;
	position: absolute;
	left: 0;
	top: 250px;
	-webkit-animation-name: example2; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
	animation-name: example2;
	animation-duration: 4s;
}




/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 from {
left:0px;
}
to {
	left: 150px;
}
 background-color: #990;
}

/* Standard syntax */
@keyframes example {
 from {
left:0px;
}
to {
	left: 150px;
}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example2 {
 0% {
 left:0px;
 background-color: #137bad;
}
 25% {
 left:100px;
 background-color: #4e4e4e;
}
 50% {
 left:150px;
 background-color: #137bad;
}
 75% {
 left:100px;
 background-color: #4e4e4e;
}
 100% {
 left:0px;
 background-color: #137bad;
}
}


/* Standard syntax */
@keyframes example2 {
 0% {
 left:0px;
 background-color: #137bad;
}
 25% {
 left:100px;
 background-color: #4e4e4e;
}
 50% {
 left:150px;
 background-color: #137bad;
}
 75% {
 left:100px;
 background-color: #4e4e4e;
}
 100% {
 left:0px;
 background-color: #137bad;
}
}
</style>

css3_keyframe.html

<p style="font-size:14px;"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<div class="vv"></div>