title: CSS transition stutters after being applied to element with CSS animation
body: <p>I'm building an AngularJS application that shows and hides an element by transitioning its opacity. The element is also being rotated by applying a CSS keyframe animation. The problem I'm having is the transition or animation stutters.</p>
  
  <p>When the element has an opacity of 1 and the transition fades it out to 0 then the element appears to go back a few frames. This is better demonstrated in a GIF. You can see it jump back just before the opacity changes.</p>
  
  <p><img src="https://i.stack.imgur.com/2D3SR.gif" alt=""></p>
  
  <p>This is my CSS.</p>
  
  <pre><code>.square {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: black;
  }
  
  .appear.ng-hide-add {
     -webkit-transition: opacity 300ms linear;
    opacity: 1;
  }
  
  .appear.ng-hide-add.ng-hide-add-active {
    opacity: 0;
  }
  
  .appear.ng-hide-remove {
    -webkit-transition: opacity 300ms linear;
    opacity: 0;
  }
  
  .appear.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
  }
  
  @-webkit-keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  
  .rotate {
    -webkit-animation: rotate 1.5s infinite linear;  
  }
  </code></pre>
  
  <p>This is my HTML.</p>
  
  <pre><code>&lt;div ng-app="app" ng-init="show = true"&gt;
    &lt;p&gt;Toggle the opacity of the square. Sometimes the rotation is interrupted when the opacity transitions from 1 to 0.&lt;/p&gt;
    &lt;button ng-click="show =!show"&gt;Toggle&lt;/button&gt;
    &lt;div class="square appear rotate" ng-show="show"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can play with the whole thing in this <a href="http://codepen.io/tatey/pen/DfGpw" rel="nofollow noreferrer">codepen</a>. Hoping someone can point me in the right direction.</p>