title: How to reverse this CSS spin animation
body: <p>Here is my code:</p>
  
  <pre><code> .dropdown:hover .arrow4{
     -webkit-animation: spin 0.3s linear;
     -moz-animation: spin 0.3s linear;
     -o-animation: spin 0.3s linear;
     -ms-animation: spin 0.3s linear;
     animation-fill-mode: forwards;
   }
   @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(90deg); }
   }
  </code></pre>
  
  <p>This works very well for spinning the arrow 90 degrees then staying, but when I hover off it snaps back into place as opposed to rotating back.</p>