title: CSS3 animation with keyframes
body: <p>I make a css3 animation with key frames. But i have a problem. This is my code:</p>
  
  <pre><code>a[title*="in je favorieten"]:hover {
      -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: 3;
      -webkit-animation-iteration-count: 3;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
  }
  
  @-moz-keyframes slidein {
      from {
          width: 25px;
      }
  
      to {
          width: 80px;
      }
  }
  
  @-webkit-keyframes slidein  {
      from {
          width: 25px;
      }
  
      to {
          width: 80px;
      }
  }
  </code></pre>
  
  <p>The problem is. When i hover the a element. The a element must be set to width 80. When i hover out. Than the a element must be return to 25 width. But now, i hover and he does the animation. And than he return to 25. How can i fix this?</p>
  
  <p>Thanks!</p>