Uniel Анимация баннера CSS3

by vovkasolovev

HTML

<div class="green">
<div id='light' class='rotating'></div>
</div>

CSS

.green {overflow: hidden; background: #63a22f}
  
#light {
    float: right; 
    width: 500px;
    height: 500px;
    background: url('http://uniel.podhod.ru/sites/all/themes/uniel/images/banner_green_bg.jpg');
    position:relative; 
    right:-390px;
    top: -160px;
    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;
  }
  
  
@-moz-keyframes rotating {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(-360deg);}
}  
  
@-webkit-keyframes rotating {
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(-360deg);}
}

@-o-keyframes rotating {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(-360deg);}
}

@-ms-keyframes rotating {
  from {-ms-transform: rotate(0deg);}
  to {-ms-transform: rotate(-360deg);}
}

@keyframes rotating {
  from {transform: rotate(0deg);}
  to {transform: rotate(-360deg);}
} 
  
  
.rotating {
    -webkit-animation: rotating 200s linear 0s infinite;
    -moz-animation: rotate 200s linear 0s infinite;
    -ms-animation: rotating 200s linear 0s infinite;
    -o-animation: rotate 200s linear 0s infinite;
    animation: rotating 200s linear 0s infinite; 
}