前端学习-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);
	}
	to{
		transform: rotate(360deg);
	}
}

使用第一种方式来定义动画是更加推荐的写法，因为很多时候动画并不是只有一个开始和结束过程就能完事了的，还需要定义中间状态。这个时候，可以通过25%，50%，75%等等百分比数值来代表中间状态的css属性值来实现更加复杂的动画效果。
定义好动画的内容以后便可以在需要动画效果的元素中来使用这个动画效果。

<div class="circle"></div>

.circle{
	border: 2px solid white;
	border-radius: 100%;
	width: 25px;
	height: 25px;
	border-top-color: transparent;
	animation: circle infinite 0.75s linear;
}

在这里，通过 animation 属性来给这个元素添加动画效果。
在这里，第一个属性是 @keyframes 所定义的动画名称(animation-name)。第二个属性是动画播放的次数(animation-iteration-count)，这里设置为infinite意思是无限循环播放。第三个属性是动画完成所需要的时长(animation-duration)，这个属性一定要设置，不然时长默认为0，就不会播放动画。第四个属性是动画的速度曲线(animation-timing-function)，这里设置为linear表示属性是线性变化的。
通过这个设置就实现了一个动画，效果图如下。。。
原理其实就是设置了一个3/4个圆环，然后让它转起来。这个其实是用来做loader的。

由于浏览器兼容的问题，@keyframes 规则，transform 属性 ，animation属性，都需要做浏览器兼容处理。
这里介绍一下常见的处理浏览器兼容问题所添加的属性前缀。
safari 和 Chrome浏览器的低版本需要使用 -webkit-前缀属性
低版本Firefox浏览器使用 -moz- 前缀属性。
低版本Opera浏览器使用 -o- 前缀属性。
低版本IE浏览器使用 -ms-前缀属性。
对于IE浏览器而言，只有IE10才支持动画，但是IE10支持的是w3c标准属性的动画，因此不需要设置前缀，而对于Transform属性来说，IE9就支持前缀属性，如果通过transform来设置静态的css属性，又要兼容IE9的话，就要加上 -ms- 前缀。
以下是transform属性的浏览器版本兼容信息：

为了兼容多种浏览器，上述的例子就应该做如下的更改。

.circle{
	 border: 2px solid white;
	 border-radius: 100%;
	 width: 25px;
	 height: 25px;
	 border-top-color: transparent;
	 -moz-animation: circle infinite 0.75s linear;
	 -webkit-animation: circle infinite 0.75s linear;
	 -o-animation: circle infinite 0.75s linear;
	 animation: circle infinite 0.75s linear;
 }
 @-moz-keyframes circle{
	0%{
		-moz-transform: rotate(0deg);
	}
	100%{
		-moz-transform: rotate(360deg);
	}
}
@-webkit-keyframes circle{
	0%{
		-webkit-transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(360deg);
	}
}
@-o-keyframes circle{
	0%{
		-o-transform: rotate(0deg);
	}
	100%{
		-o-transform: rotate(360deg);
	}
}
@keyframes circle {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}