首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS3:animation属性范例操作

2012-09-14 
CSS3:animation属性实例操作文章中的实例须在FireFox6+、或者教新版本的Chrome或是Safari浏览器查看。在css3

CSS3:animation属性实例操作

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

CSS3:animation属性范例操作

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

热点排行