회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다.

.spinimage{
  -webkit-animation: spin 4s infinite linear;
  -o-animation: spin 4s infinite linear;
  -moz-animation: spin 4s infinite linear;
  animation: spin 4s infinite linear;
}

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

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

 회전을 멈출 때는 아래 코드를 활용한다.

.stoped{    
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

멈춘 상태에서 회전을 진행하고 싶을 때는 아래 코드를 활용한다.

.turned{    
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}