CSS Pseudo Class Selectors to create animation to shrink and enlarge dot - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Heartbeat

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

Description

CSS Pseudo Class Selectors to create animation to shrink and enlarge dot

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">
.product_title {<!-- w w w.  ja  v  a 2s.  com-->
   border:6px solid Chartreuse;
   width:0px;
   height:0px;
   background-color:yellow;
   position:relative;
   z-index:11;
   border-radius:11px;
   opacity:0.10;
   -webkit-transition-duration:0.9s;
   -moz-transition-duration:0.9s;
   -ms-transition-duration:0.9s;
}

.product_wrap:hover .product_title {
   width:155px;
   height:165px;
   -webkit-transition-duration:0.9s;
   -moz-transition-duration:0.9s;
   -ms-transition-duration:0.9s;
   overflow:visible;
   position:absolute;
}

.product_wrap {
   width:201px;
   height:201px;
}
</style> 
 </head> 
 <body> 
  <div class="product_wrap"> 
   <div class="product_title"></div> 
  </div>  
 </body>
</html>

Related Tutorials