AngularJS CSS3 Animations for ng-repeat

Problem

My CSS is:

.fade-in-repeat {
    -webkit-animation: fadein 2s; /* Safari and Chrome */
       -moz-animation: fadein 2s; /* Firefox */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

My HTML is:

  <tr class="fade-in-repeat" ng-repeat="transaction in transactions | orderBy:transaction.time">
    <td>
      <div class="row">
        <div class="col-lg-6">

So as items are added, I want them to fade in. The problem is there is a FUOC before the animation kicks in, which makes it look like it's flickering

Problem courtesy of: Shamoon

Solution

Just add opacity:0 to .fade-in-repeat's CSS

Demo

Solution courtesy of: Zach Saucier

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.