title: css3 animation keep reverting to original state
body: <p>Playing around with CSS 3 animations but for some reasons, all animations return to their original state after execution.</p>
  
  <p>In this case I'd like the image to remain at <code>scale(1)</code> after animation and my text to oly appear after img animation but stay afterward.</p>
  
  <pre><code>.expanding-spinning {
     -webkit-transform: scale(.4);
     -webkit-transition-timing-function: ease-out;
     -webkit-transition-duration: 500ms;
     animation-duration: 500ms;
  }
  
  .expanding-spinning {
    -webkit-animation: spin2 1.4s ease-in-out alternate;
    animation: spin2 1.4s ease-in-out alternate;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  @-webkit-keyframes spin2 {
    0% { -webkit-transform: rotate(0deg) scale(.4);}
    100% { -webkit-transform: rotate(360deg) scale(1);}
  }
  @-keyframes spin2 {
    0% { transform: rotate(0deg) scale(.4);}
    100% { transform: rotate(360deg) scale(1);}
  }
  
  @-webkit-keyframes fadeInFromNone {
    0% {
      display:none; 
      opacity: 0;
    }
  
    100% {
      display: block; 
      opacity: 1;
    }
  }
  
  .slogan {
    display: block;
    opacity: 1;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-delay: 3.5s;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WHFmB/1" rel="noreferrer">Fiddle code</a></p>