Untitled

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
        <style>
            .fade-in-animation.ng-enter {
                -webkit-transition: 0.5s linear all;
                transition: 0.5s linear all;
                opacity: 0;
            }

            .fade-in-animation.ng-enter-stagger {
              /* this will have a 100ms delay between each successive leave animation */
              -webkit-transition-delay: 0.05s;
              transition-delay: 0.05s;
              /* in case the stagger doesn't work then these two values
               must be set to 0 to avoid an accidental CSS inheritance */
              -webkit-transition-duration: 0s;
              transition-duration: 0s;
            }

            .fade-in-animation.ng-enter.ng-enter-active {
                opacity: 1;
            }
        </style>
    </head>
    <body>

        <div ng-app="sloth" ng-controller="MainCtrl">
            <ul>
                <li ng-repeat="item in items" class="fade-in-animation">
                    {{item}}
                </li>
            </ul>
        </div>


        <script>
            angular.module('sloth', ['ngAnimate'])
                .controller(
                    'MainCtrl',
                    ['$scope', '$timeout',
                    function ($scope, $timeout) {

                        var items = []
                        $timeout(function () {
                            for (var i = 0; i <=100; i++) {
                                items.push('item' + i);
                            }
                            $scope.items = items;
                        }, 100);
                }])
        </script>
    </body>
</html>

// Code goes here

/* Styles go here */