title: Prevent element from returning to original position after keyframe animation
body: <p>I am trying out Dan Eden's <a href="http://daneden.github.io/animate.css/" rel="nofollow">animation.css</a> in my angular app. </p>
  
  <p>I have a custom directive which uses angular's $animate service to add CSS classes to my element. </p>
  
  <p>Example:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.bounce-add.bounce-add-active {
      -webkit-animation: bounceOutLeft 2.5s;
      animation: bounceOutLeft 2.5s;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;div my-directive="action"/&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>myMod.directive("myDirective", function ($animate) {
  
  var linker = function (scope, element, attrs) {
  
      scope.$watch('myDirective', function (value, oldValue) {
              // if( value == doBounce ) 
              $animate.addClass(element, 'bounce').then(function () {
        });
  }
  
  return {
      link: linker,
      scope: {
          'myDirective': '=',
      },
    };
  });
  </code></pre>
  
  <p>Here the bounce out left animation appears when I expect it to, however my element then returns back to it's original position.</p>
  
  <p>I have tried animation-fill-mode: forwards with no luck. I have also tried adding an extra CSS class since angular removes the class after the animation is finished, so instead of <code>.bounce-add.bounce-add-active</code> I have <code>.bounce.bounce-add.bounce-add-active</code> along with <code>class="bounce"</code> in my html. </p>
  
  <p>Is there a way to keep elements at their final position after using a CSS style containing a key frame animation using the $animate service's addClass?</p>
  
  <p><a href="http://plnkr.co/edit/svl4PNBVaSu5YYpj9qE3" rel="nofollow">Here is the Plunker example.</a></p>