CSS3のanimationを使い、常時回転するサークルの集合体のようなグラフィックをつくり、賑やかし等に活用します。

デモページ

HTML

<div id="circleBox">
	<div class="circle" id="c01"></div>
	<div class="circle" id="c02"></div>
	<div class="circle" id="c03"></div>
	<div class="circle" id="c04"></div>
	<div class="circle" id="c05"></div>
</div>

CSS

#circleBox {
	position: relative;
	margin: 0 auto;
	width: 200px;
	height: 200px;
}
.circle {
	animation-name: css3RotationGraphic;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	-webkit-animation-name: css3RotationGraphic;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
	-moz-animation-name: css3RotationGraphic;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 5s;
	width: 200px;
	height: 200px;
	border-radius: 200px;
	border-style: solid;
	border-width: 1px;
	position: absolute;
}
@keyframes css3RotationGraphic {
  0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

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

#c01 {
  border-color: #52d3ff;
  left: 1px;
  top: 2px;
  -webkit-transform-origin: 50% 52%;
  -moz-transform-origin: 50% 52%;
}
#c02 {
  border-color: #52f1ff;
  left: 3px;
  top: 2px;
  -webkit-transform-origin: 51% 51%;
  -moz-transform-origin: 51% 51%;
}
#c03 {
  border-color: #52ffe9;
  left: 3px;
  top: 1px;
  -webkit-transform-origin: 52% 50%;  
  -moz-transform-origin: 52% 50%;  
}
#c04 {
  border-color: #52bcff;
  left: 0px;
  top: 2px;
  -webkit-transform-origin: 51% 50%; 
  -moz-transform-origin: 51% 50%; 
}
#c05 {
  border-color: #529bff;
  left: 2px;
  top: 2px;
  -webkit-transform-origin: 52% 50%; 
  -moz-transform-origin: 52% 50%; 
}

デモページ