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图片轮转播放效果
?
相关代码如下:
?
关于CSS3 的animate属性,可以参考W3C: CSS Animations Module Level 3 和w3cplus CSS3 Animation 对属性的介绍和说明。虽然目前很多浏览器还没有完全支持transition, transform, animation这些属性,但是在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。