CSS3动画

CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。

CSS3还有变形(transformation)、转换(transition)和动画(animation)等更高级的技术,本文只看animation,其它几个比较naive。

 

animation的一些参数

animation的参数和translate有些像,所以如果你理解了translate的参数,这里就不难理解了。

animation-name
动画的名称。

animation-duration
定义动画播放一次需要的时间。默认为0;

animation-timing-function
定义动画播放的方式,参数设置类似transition-timing-function

animation-delay
定义动画开始的时间

animation-iteration-count
定义循环的次数,infinite即为无限次。默认是1。

-webkit-animation-direction
动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。

浏览器支持

不幸的是,目前,只有少数浏览器支持CSS动画。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 浏览器中工作。Safari 4 (Snow Leopard)支持3D动画

#rotate {
	margin: 0 auto;
	width: 600px;
	height: 400px;
	/* 确保我们是在一个 3-D 空间 */
	-webkit-transform-style: preserve-3d;
	/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
	/* 定义要调用的动画 */
@-webkit-keyframes x-spin {
	0% { -webkit-transform: rotateX(0deg); }
	50% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(360deg); }
}

效果点此

 

 

不用兼容低级浏览器,不用写恶心的hack代码,真爽!