在做移动端页面时候，在页面呈现之际需要一个好的体验，就需要对页面上的元素做一些处理，让元素动态显示出来，即添加入场动画。

添加入场动画有三种方式。

一、使用jquery的animate控制元素的位置等属性，如$(‘.obj’).delay(100).animate({‘left’:100},300,function(){});对不同的元素控制delay时间实现先后次序的动画。但这种方式在移动端页面上性能很低，不可取。

二、使用css3的transition属性。比如页面上有个class为obj的元素，设置css为

.obj{position:absolute;left:294px;top:12px;-webkit-transform:matrix(1,0,0,1,640,300) translateZ(0);opacity:1;}
.dis .obj{-webkit-transition:all 0.6s cubic-bezier(0,.8,.6,1);-webkit-transform:matrix(1,0,0,1,0,0) translateZ(0);opacity:1;}

三、使用css3的animation属性。比如页面上有个class为obj1，obj2的元素，设置css为

.obj1{position:absolute;left:42px;top:10px;opacity:0;-webkit-transform:translate3d(-640px,0,0);}
.obj2{position:absolute;left:42px;top:310px;opacity:0;-webkit-transform:translate3d(640px,0,0);}
.dis .obj1{opacity:1;-webkit-transform:translate3d(0,0,0);-webkit-animation:2s ani1_1 ease-out;}
.dis .obj2{opacity:1;-webkit-transform:translate3d(0,0,0);-webkit-animation:2s ani1_2 ease-out;}
@-webkit-keyframes ani1_1{
	0%{
		opacity:0;
		-webkit-transform:translate3d(-400px,-800px,0);
	}
	20%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	30%{
		opacity:1;
		-webkit-transform:translate3d(0,-30px,0);
	}
	40%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	100%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
}
@-webkit-keyframes ani1_2{
	0%{
		opacity:0;
		-webkit-transform:translate3d(0,-800px,0);
	}
	5%{
		opacity:0;
		-webkit-transform:translate3d(0,-800px,0);
	}
	25%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	35%{
		opacity:1;
		-webkit-transform:translate3d(0,-30px,0);
	}
	45%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	100%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
}

当需要呈现时候给父节点添加dis的class，则动画开始播放，在设置dis前，应该先给元素强行reflow一下，以便动画每次都执行，reflow可以采用设置offsetWidth的方式。animation设置动画时候统一设置一个时间，这里设置了2s，是为了统一管理动画的先后呈现，通过设置百分比的位置确定动画开始的时间可以方便控制显示的动画节奏。这种方式可以添加比较复杂的动画，但是缺点是添加比较麻烦，一个元素对应一个动画配置，需要时间投入。由于这种方式实现的动画体验比较好，在时间允许情况下推荐使用这种方式添加动画。

附上该方式实现的站点http://my.163.com/2015/wanted/