CSS教程:需要知道的CSS3动画技术

注：参数部分为前端观察翻译时添加，原文中没有。

浏览器支持

像transform属性一样酷，但是目前只有WebKit浏览器支持。Opera 10.5 pre版本也可以通过添加-o-前缀来支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#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); } 
}

这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。

animation的一些参数

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

• animation-name

  动画的名称。

• animation-duration

  定义动画播放一次需要的时间。默认为0；

• animation-timing-function

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

• animation-delay

  定义动画开始的时间

• animation-iteration-count

  定义循环的次数，infinite即为无限次。默

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!