CSS3：animation属性实例操作

文章中的实例须在FireFox6+、或者教新版本的Chrome或是Safari浏览器查看。

在css3.0发布transtion、transfrom就觉的css在操作行为上作出了很大的改为，觉的这应该就是动画的操作了，今天刚看到animation，看了看官方的说明和实例，觉的比transtion厉害多了。

 

这是实现上下滚动的效果，设置对应的时间段（百分比）和对应的列表的垂直位置即可：

您可以狠狠地点击这里：

纯CSS下的图片轮转播放效果

 

animation属性下的新出来的个关键字属性step。之前我们应用animate动画，出现的效果都是很平滑很流畅的。而step的作用是分步实现，可做出停顿的效果，一个是step-end，即一次性动画结束，另外一个就类似于steps(30, end)，一个动画要顿30次完成。

您可以狠狠地点击这里：

添加了step-end图片轮转播放效果

 

相关代码如下：

@-moz-keyframes photo{
	from,to{top:0;}
	10%{top:0;}
	
	20%{top:-300px;}
	30%{top:-300px;}
	
	40%{top:-600px;}
	50%{top:-600px;}
	
	60%{top:-900px;}
	70%{top:-900px;}
	
	80%{top:-1200px;}
	90%{top:-1200px;}
}

.content-photo{
	position:absolute;left:0;top:0;
	-moz-animation:photo 20s infinite;
	-webkit-animation:photo 20s step-end infinite;
}

 
 css3还有很大潜力可挖掘，就看你如何来看待了，结合transition, transform, animation效果制作出来的实例：

您可以狠狠地点击这里：

transition, transform, animation效果

 

关于CSS3 的animate属性，可以参考

W3C: CSS Animations Module Level 3

和

w3cplus CSS3 Animation

对属性的介绍和说明。虽然目前很多浏览器还没有完全支持transition, transform, animation这些属性，但是在渐进增强的原则下，其高效的动画实现方式还是有很实际的应用价值的。