CSS代码（这里只贴出bounceInUp，具体看animate.css）
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}@-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }} @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }} .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp;}
列表加载淡入动画
这个没有具体的css样式，需要自己写css，先来看一下效果：
可以看到最后一条数据还没有加载出来，这里的效果就是列表数据开始加载时，从第一条数据开始慢慢向下加载，一条一条的淡入动画。
使用方法
因为是列表，所以一般使用ng-repeat或者collection-repeat来展示数据，那么就在repeat的div上面加上一个自定义class，如：own-list-animation，接着对这个class进行css样式的封装：
.own-list-animation.ng-enter { -webkit-animation: fadeIn 0.5s; animation: fadeIn .5s;} .own-list-animation.ng-enter-stagger { -webkit-animation-delay: 150ms; animation-delay: 150ms; /* override to make sure it's not inherited from other styles */ -webkit-animation-duration: 0; animation-duration: 0;}
这样即可实现列表的淡入展示效果。
较常用的效果不错并且在安卓机不卡顿的动画效果大概就这些，希望对大家有帮助。
