日期:2014-05-17  浏览次数:20574 次

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这些属性,但是在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。