Cercles animés.

Ultra basique, rotation avec arrêt de l'anim au survol de la souris.

.cercle {
		margin-top: 15px;
 		margin-bottom: 15px;
 		padding: 0px;
 
 		width: 75px;
 		height: 75px;
 
 		border: 2px dashed red; 
 		border-radius: 50%;
 
 		background-color: transparent;
} 

.cercle:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
	
.crY {
    -webkit-animation:spinY 4s linear infinite;
    -moz-animation:spinY 4s linear infinite;
    animation:spinY 4s linear infinite;

}

.crX {
    -webkit-animation:spinX 4s linear infinite;
    -moz-animation:spinX 4s linear infinite;
    animation:spinX 4s linear infinite;
}

.crZ {
    -webkit-animation:spinZ 4s linear infinite;
    -moz-animation:spinZ 4s linear infinite;
    animation:spinZ 4s linear infinite;
}

@-moz-keyframes spinY { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spinY { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spinY { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }


@-moz-keyframes spinX { 100% { -moz-transform: rotateX(360deg); } }
@-webkit-keyframes spinX { 100% { -webkit-transform: rotateX(360deg); } }
@keyframes spinX { 100% { -webkit-transform: rotateX(360deg); transform:rotateX(360deg); } }


@-moz-keyframes spinZ { 100% { -moz-transform: rotateZ(360deg); } }
@-webkit-keyframes spinZ { 100% { -webkit-transform: rotateZ(360deg); } }
@keyframes spinZ { 100% { -webkit-transform: rotateZ(360deg); transform:rotateZ(360deg); } }
								
.cercle2 {
		position: absolute;
}

<div class="cercle2 crY"></div>
<div class="cercle2 crX"></div>
<div class="cercle2 crZ"></div>								
								

TODO: arrêter TOUTE l'anim... cf CSS l-214 222.


Avec un peu de style...

code partiel, l'intégral est dans le code source de la page.							 	
.cercle3 {
		position: absolute;
		margin-top: 15px;
 		margin-bottom: 15px;
 		padding: 0px;
 
 		width: 75px;
 		height: 75px;
 
 		border: 1px solid red; 
 		border-radius: 50%;
 
		box-shadow: inset 0 0 10px #FC2C40 ,0 0 20px #FC2C40; 
 		background-color: transparent;

		 box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		
		transform-style: preserve-3d; 
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		
		-webkit-animation: rotateCercle3 1s linear infinite;
		-moz-animation: rotateCercle3 1s linear infinite;
		-ms-animation: rotateCercle3 1s linear infinite;
		animation: rotateCercle3 1s linear infinite;	
} 							

@keyframes rotateCercle3 {
	0% {
		transform: rotateX(45deg) rotateY(0deg);
	}
	50% {
		transform: rotateX(45deg)  rotateY(90deg);
	}
	100% {
		transform: rotateX(45deg) rotateY(180deg);
	}
}	
etc...
.cercle3:nth-child(2){
	-webkit-animation-delay:0.2s;
	-moz-animation-delay:0.2s;
	-ms-animation-delay:0.2s;
	animation-delay:0.2s;
}
etc...