Giving animate of list items

1

Hi. I show some info in list. I want to give each item an animation when they show. My list is like below:

 <div class="list">
    <a class="item item-icon-left" ng-class="slide-fade" href="#/p1"> <i class="icon ion-gear-b"></i>item1</a>
    <a class="item item-icon-left" ng-class="slide-fade" href="#/p2"> <i class="icon ion-gear-b"></i>item2   </a>
    <a class="item item-icon-left" ng-class="slide-fade" href="#/p3"> <i class="icon ion-gear-b"></i>item3   </a>
 </div>

slide-fade class is :smile:.slide-fade { -webkit-transition: opacity 2.0s ease-in; -moz-transition: opacity 2.0s ease-in; -o-transition: opacity 2.0s ease-in; opacity: 1; transition-delay:1s; }

I can not give animation. How can I do this? Thanks in advance