前端学习-Css3动画入门

Css3动画

在Css3中，用 @keyframes 规则来定义动画的。

可以看到，在IE10以前的版本是不兼容Css3动画的，而且特定的浏览器需要使用特定的前缀来让浏览器支持动画效果。所以使用Css3动画需要考虑一下浏览器兼容的问题。
下面是一个动画定义的例子。

@keyframes circle {
   
	0%{
   
		transform: rotate(0deg);
	}
	100%{
   
		transform: rotate(360deg);
	}
}

以上使用的都是w3c标准语法。
在这个例子中，首先通过 @keyframes 准则来定义一个名为 circle 的动画。在定义的内容中，有两种方式，一种就像这个例子中的写法，通过百分比来定义动画的某个状态下的css属性。譬如，上面这个例子的0%中的内容，表示这个动画的开始状态下的css属性是这个元素静止状态下转动0°的样子(也就是不转)，100%表示一个动画过程结束时的css属性是这个元素静止状态下转动360°的样子。所以这个动画全过程便是从静止状态下开始，转动一周，结束停止。而另外一种方式则是使用from和to来表示动画开始与结束时的状态。上面的例子可改写为：

@keyframes circle {
   
	from{
   
		transform: rotate(0deg)