title: How does one keep CSS3 animation state after ng-animate?
body: <p>I am trying to change a div' state using <code>ng-animate</code> + CSS3 transitions.</p>
  
  <p>My animations works just fine with this CSS except for the fact that the div doesn't keep its size + color once the animation is done.</p>
  
  <pre><code>.fade-hide, .fade-show {                                                                                                                                     
    -webkit-transition:all linear 1s;                                                                                                                          
    -moz-transition:all linear 1s;                                                                                                                             
    -o-transition:all linear 1s;                                                                                                                               
    transition:all linear 1s;  
  }                                                                                                                                                            
  .fade-hide {                                                                                                                                                 
    opacity:1;                                                                                                                                                 
  }                                                                                                                                                            
  .fade-hide.fade-hide-active {                                                                                                                                
    opacity:0;                                                                                                                                                 
  }                                                                                                                                                            
  .fade-show {                                                                                                                                                 
    opacity:0;                                                                                                                                                 
  }                                                                                                                                                            
  .fade-show.fade-show-active {                                                                                                                                
    opacity:1;
    background-color: red;
    height: 200px;
  }                
  </code></pre>
  
  <p>I have already tried using <code>animation-fill-mode:forwards;</code> but its state is still not preserved.</p>
  
  <p><a href="http://jsfiddle.net/rxdazn/pJMQc/1/" rel="nofollow"><strong>jsFiddle</strong></a></p>