Run animation on hover to rotate image - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Rotate

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Rotate

Description

Run animation on hover to rotate image

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>

@-webkit-keyframes spinnerRotate<!--from  ww  w.j a va 2 s  .c  o  m-->
{
   from{-webkit-transform:rotate(0deg);}
   to{-webkit-transform:rotate(360deg);}
}
#spin {
   position:fixed;
   top:100px;
   left:100px;
   -webkit-animation-name: spinnerRotate;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: linear;
}
#spin:hover img{
   -webkit-animation-name: spinnerRotate;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: linear;
}

      </style> 
 </head> 
 <body> 
  <div id="spin"> 
   <img src="https://www.java2s.com/style/demo/Firefox.png"> 
  </div>  
 </body>
</html>

Related Tutorials