title: How to scale div smoothly in css using keyframes
body: <p>I want to smoothly scale the div from ratio <code>0.06 to 1</code> using css on mouseover.but i m not able to get that effect.</p>
  
  <p>Here is what i have tried</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  div {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
      transition: width 2s, height 4s;
  }
  
  div:hover {
      transform:scaleX(0.06);
      animation-name: example;
      animation-duration: 1s;
  }
  
  @keyframes example {
      25%  {transform:scaleX(0.200);}
      50%  {transform:scaleX(0.500);}
      75%  {transform:scaleX(0.700);}
      100% {transform:scaleX(1);}
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This example does not work in Internet Explorer 9 and earlier versions.&lt;/p&gt;
  
  &lt;div&gt;jhk&lt;/div&gt;
  
  &lt;p&gt;Hover over the div element above, to see the transition effect.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can i do this?</p>