title: How to keep CSS3 Animation still after finishing, then reverting after mouse goes away
body: <p>I have a question regarding CSS3 animations/transforms. Typically, I can always find my way around CSS3 - as it's so simple, but this one has been giving me trouble.</p>
  
  <p>What I have is a picture of a plus sign. When the user hovers over the plus sign, it rotates 360 degrees and the picture changes to a minus sign. Everything's working well, except when the animation finishes it reverts quickly back to the plus sign; I want it to stay on the minus sign until the mouse hovers out, then it can go back to the plus sign.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>#lock-screen #time-section .unlock {
      cursor: pointer;
      display: block;
      height: 22px;
      width: 23px;
      background-image: url('../images/metro_icon_pack/plus.png');
      background-repeat: no-repeat;
      margin-left: -15px;
      margin-top: 5px;
  }
  
  #lock-screen #time-section .unlock:hover {
      animation: rotate 1s;
      -o-animation: rotate 1s;
      -ms-animation: rotate 1s;
      -moz-animation: rotate 1s;
      -webkit-animation: rotate 1s;
  }
  
  @-webkit-keyframes rotate {
      0% {
          -webkit-transform: rotate(0deg);
      }
  
      100% {
          -webkit-transform: rotate(360deg);
          background-image: url('../images/metro_icon_pack/minus.png');
      }
  }
  </code></pre>
  
  <p>Now, I realize I only am giving code for WebKit-based browsers (Chrome and Safari). That's because I'm testing it in Chrome, and I will later add further support for other browsers once I get it. </p>
  
  <p>Thanks for any help, guys!</p>