Анимация вращения CSS3

by vovkasolovev

HTML

<div class="green">
<div id='light' class='rotation'></div>
<div id='light' class='horisontal-move'></div>
<div id='light' class='vertical-move'></div>
<div id='light' class='circle-move'></div>    
</div>

CSS

.green {overflow: hidden; background: #63a22f; height: 2000px}
  
#light {
    width: 500px;
    height: 500px;
    background: url('http://uniel.podhod.ru/sites/all/themes/uniel/images/banner_green_bg.jpg');
    position:relative; 
    opacity:0.7;
    
  }
  
#light:hover {opacity:1;
    -webkit-transition : opacity 0.2s ease-in;   
    -moz-transition : opacity 0.2s ease-in;
    -ms-transition : opacity 0.2s ease-in;    
    -o-transition : opacity 0.2s ease-in;
    transition : opacity 0.2s ease-in;
  }

@keyframes "rotation" {
  from {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      
    } 
    to {
      transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
    }
}

@-webkit-keyframes "rotation" {
    from{-webkit-transform: rotate(0deg); transform: rotate(0deg);} 
    to {-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
} 
@-moz-keyframes rotation { 
    from {-moz-transform: rotate(0deg); transform: rotate(0deg);} 
    to {-moz-transform: rotate(-360deg);transform: rotate(-360deg);}
}  
@-o-keyframes "rotation" {
    from {-o-transform: rotate(0deg); transform: rotate(0deg);} 
    to {-o-transform: rotate(-360deg);transform: rotate(-360deg);}
}
@-ms-keyframes "rotation" {
    from {-ms-transform: rotate(0deg); transform: rotate(0deg);} 
    to {-ms-transform: rotate(-360deg);transform: rotate(-360deg);}
}
 


@keyframes "circle-move" {
 from {
       -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
       -moz-transform: rotate(0deg) translate(-10px) rotate(0deg);
       -o-transform: rotate(0deg) translate(-10px) rotate(0deg);
       -ms-transform: rotate(0deg) translate(-10px) rotate(0deg);
       transform: rotate(0deg) translate(-10px) rotate(0deg);
 }
 to {
     ...