CSS3のサンプル（CSS Transforms）

gistfile1.css

@-webkit-keyframes fade {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}

@-webkit-keyframes rotate {
	0% {-webkit-transform: rotate(0);}
	100%{-webkit-transform:rotate(360deg);}
}

@-webkit-keyframes move {
	0% {left: 0; top: 0;}
	25% {left: 50px; top: 0px;}
	50% {left: 0px; top: 0px;}
	75% {left: -50px; top: 0px;}
	100% {left: 0px; top: 0px;}
}

div#cssloading {
	/*-webkit-animation-name: rotate, fade;*/
	width: 48px;
	height: 48px;
	position: relative;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

div#cssloading span {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
}

div#cssloading span.circle1 {
	top: 3px;
	left: 19px;
	background-color: #ff0000;
	opacity: .50;
}

div#cssloading span.circle2 {
	top: 7px;
	left: 30px;
	background-color: #ffa500;
	opacity: .50;
}

div#cssloading span.circle3 {
	top: 19px;
	left: 35px;
	background-color: #ffff00;
	opacity: .50;
}

div#cssloading span.circle4 {
	top: 30px;
	left: 30px;
	background-color: #90ee90;
	opacity: .50;
}

div#cssloading span.circle5 {
	top: 35px;
	left: 19px;
	background-color: #008000;
	opacity: .50;
}

div#cssloading span.circle6 {
	top: 30px;
	left: 8px;
	background-color: #0000ff;
	opacity: .50;
}

div#cssloading span.circle7 {
	top: 19px;
	left: 3px;
	background-color: #800080;
	opacity: .50;
}

div#cssloading span.circle8 {
	top: 7px;
	left: 8px;
	background-color: #ff00ff;
	opacity: .50;
}