I made a CSS3 animation connected to an `ng-repeat` which then shows an `inline-list` with Bootstrap3, I limited the number of maximum 3 of the list showing and I have some little issues with appears mostly in Firefox (believe it or not IE11 is without issues, wow I was surprised). 

I have 2 buttons (previous/next) and when I click the Next button then the animation of sliding from left to right start to do his job, but in Firefox when clicking multiple times, it seems that the animation only works on 2/3 of the list (basically the last item on the right always show up first without even sliding while the others are sliding from left to right). It's a little hard to explain other than that, but if you try the example in the [plunker](http://plnkr.co/edit/qVvzvxRcf06vnclXMICu) you will see the effect.

As I said this problem only occurs, so far, only in Firefox and seems ok in Chrome and IE11. 

Again here is my [plunker](http://plnkr.co/edit/qVvzvxRcf06vnclXMICu)

My AngularJS controller code

```
<ul class="list-inline quotes">
  <li ng-repeat="quote in vm.marketDisplayedQuotes | limitTo:3" class="{{vm.animationClass}} quotes quote-{{$index}}">
        <span class="quote-name">{{quote.name}}</span> 
        <span class="quote-last">{{quote.last}}</span> 
        <span class="quote-change-percent {{quote.direction}}">{{quote.changePercent}}</span>
    </li>
</ul>

```

and then the Left to Right code for the CSS animation

```
/* Left to Right */
.animation-lr.ng-enter {
  -webkit-transition: 1s ease-out all;
  -o-transition: 1s ease-out all;
  transition: 1s ease-out all;

  -webkit-transform: translate(-100%,0);
  -o-transform: translate(-100%,0);
  transform: translate(-100%,0);
}

.animation-lr.ng-leave {
  -webkit-transition: 0s ease-out all;
  -o-transition: 0s ease-out all;
  transition: 0s ease-out all;

  -webkit-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

.animation-lr.ng-enter.ng-enter-active {
  -webkit-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

.animation-lr.ng-leave.ng-leave-active {
  -webkit-transform: translate(100%,0);
  -o-transform: translate(100%,0);
  transform: translate(100%,0);
}

```

You can see the effect in a print screen I made from the plunker, "CAC" is completely on right (and is fixed there and is not moving), not being at all part of the sliding animation effect  

![Right Text not sliding](https://i.stack.imgur.com/TKuTm.jpg)