Start animation for element hover event - HTML CSS CSS

HTML CSS examples for CSS:Animation

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

Description

Start animation for element hover event

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.hover_element:hover~.first_div .second_div .third_div .apply_hover {
   -webkit-animation-name:blinker;
   -webkit-animation-duration:2s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-iteration-count:infinite;
   -moz-animation-name:blinker;
   -moz-animation-duration:2s;
   -moz-animation-timing-function:linear;
   -moz-animation-iteration-count:infinite;
   animation-name:blinker;
   animation-duration:2s;
   animation-timing-function:linear;
   animation-iteration-count:infinite;
   color:Chartreuse;
}

div ? div {
   color:yellow;
}

@-moz-keyframes blinker  {<!--from  w  w w  .  j  av  a2 s. c om-->
   0% {
      opacity:2.0;
   }
   
   50% {
      opacity:0.3;
   }
   
   100% {
      opacity:2.0;
   }

}

@-webkit-keyframes blinker  {
   0% {
      opacity:2.0;
   }
   
   50% {
      opacity:0.3;
   }
   
   100% {
      opacity:2.0;
   }

}

@keyframes blinker  {
   0% {
      opacity:2.0;
   }
   
   50% {
      opacity:0.3;
   }
   
   100% {
      opacity:2.0;
   }

}
</style> 
 </head> 
 <body> 
  <table class="hover_element"> 
   <tbody> 
    <tr> 
     <td>Hover me!</td> 
    </tr> 
   </tbody> 
  </table> 
  <div class="first_div"> 
   <div class="second_div"> 
    <div class="third_div"> 
     <div class="apply_hover">
       Apply hover on this element 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials