title: CSS3 Animate on mouse over
body: <p>I have written an animation code like such:</p>
  
  <pre><code>    .bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
     animation-delay: 0s;
     animation-iteration-count: 0;
     animation-direction: alternate;
     animation-play-state: paused;
  }
  .bounce:hover {
      animation-play-state:running;
     animation-iteration-count: 1;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
  }
  </code></pre>
  
  <p>And assigned the class "bounce" to a button on my page. When I mouse over it, it has a nice little bounce animation, but when I mouse over it again, it wont play. What can I do to make it bounce every time I mouse over it?</p>