title: animate back css animation
body: <p>I have written the following css animation:</p>
  
  <pre><code>@-webkit-keyframes shadow {
      from {
          color: rgba(200, 200, 200, 0);
      }
      to {
          color: rgba(200, 200, 200, 1);
      }
  }
  #social .items div:hover span{
      -webkit-animation: shadow 0.4s linear 0.5s 1 alternate;
      -webkit-animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>you can see the result here: <a href="http://mklmb.bplaced.de/page/" rel="nofollow">http://mklmb.bplaced.de/page/</a> (the 3 circles right)
  But, when you leave the field of the social box after hovering it, the text color just jumps back to transparent. I want to let it animate back. 
  How can i do this?</p>