<!-- NOTE: In Chrome there is a brief glitch during the transition after the first one -->
<div class='spiralContainer'><div class='spiral'></div></div>
.spiralContainer {
border-radius: 50%;
width:200px;
height:200px;
overflow:hidden;
margin:20px;
-webkit-animation: spin 3s linear 0s infinite reverse;
-moz-animation: spin 3s linear 0s infinite reverse;
-ms-animation: spin 3s linear 0s infinite reverse;
-o-animation: spin 3s linear 0s infinite reverse;
animation: spin 3s linear 0s infinite reverse;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.spiral {
width:200px;
height:200px;
border-radius: 50%;
background-image: url(http://farm7.staticflickr.com/6115/6319704650_0a2bd0dcef_o.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation: spin 6s linear 0s infinite normal;
-moz-animation: spin 6s linear 0s infinite normal;
-ms-animation: spin 6s linear 0s infinite normal;
-o-animation: spin 6s linear 0s infinite normal;
animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
@keyframes spin {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(0deg); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.