title: why this on hover animation is not working properly?
body: <p>we have this h1 here</p>
  
  <pre><code>&lt;h1 class="in"&gt;hello&lt;/h1&gt;
  </code></pre>
  
  <p>and css for this is</p>
  
  <pre><code>    .in{
  -webkit-animation:mymove1 3s 1;
     }
  .in:hover {
   -webkit-animation:nextT 3s 1;
          -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes "mymove1"
  {
  0% {opacity:0;
        margin-left:0px;}
  100% {opacity:1;
      margin-left: 8px;}
  }
  @-webkit-keyframes "nextT"
  {
  0% {
       -webkit-transform:scale(1);
      }
  100% {
      -webkit-transform:scale(1.2);
      }
  }
  </code></pre>
  
  <p>so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
  <a href="http://jsfiddle.net/dsBtU/" rel="nofollow">jsFiddle</a>  </p>