Make div scale to larger than it's original size using css animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Size

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

Description

Make div scale to larger than it's original size using css animation

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">

.tab {<!--  ww w  . ja  v a 2  s  .  c o m-->
   width: 140px;
   height: 210px;
   background-color: red;
}
.tab.animate
{
   -webkit-animation: enlarge 5s forwards;
}
@-webkit-keyframes enlarge{
   0%  { -webkit-transform: scale(0,0) }
   100% {-webkit-transform: scale(3,4) }
}


      </style> 
 </head> 
 <body> 
  <div class="tab"> 
  </div> 
  <div class="tab animate"> 
  </div>  
 </body>
</html>

Related Tutorials