CSS3中的动画功能之transtions和animations详解
CSS3中的动画功能分为Transitions和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。
一.Transitions
Transitions功能通过光标来触发将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。可通过transtions属性来使用Transtions功能。
语法：transitions: property duration timing-function
- property: 表示对哪个属性进行平滑过渡(可设置为all，则所有属性值变化时均产生动画效果)
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
兼容性写法：
div { width:100px; transition: all 1s linear;; -moz-transition: all 1s linear; /* Firefox 4 */ -webkit-transition: all 1s linear; /* Safari 和 Chrome */ -o-transition: all 1s linear; /* Opera */ }
也可以同时给一个元素加多个动画
transitions: background-color 1s linear, color 1s linear, width 1s linear;
- linear 在动画开始时到结束时以同样的速度进行改变
- ease-in 动画开始时速度很慢，然后速度沿曲线值加速
- ease-out 动画开始时速度很快，然后速度沿曲线值减速
- ease 动画开始速度很慢，然后速度沿曲线值加速，然后再沿曲线值减速
- ease-in-out 同ease
二 .Animations
transtions只能制作从起始到结束的一个动画，animations可以制作关键桢的更加复杂的动画。
语法：animations: name duration timing-function iteration-count;
- name: 关键帧集合名（通过此名创建关键帧的集合，见下面样例代码）
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
- iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1
样例代码：
.box {
background-color: red;
animation: mycolor 4s linear infinite;//无限循环
//animation: mycolor 4s linear 1;//1次循环
}
@-webkit-keyframes mycolor {
0% { background-color: red; opacity:0.5;//可设置透明度 }
40% { background-color: darkblue; }
70% { background-color: yellow; }
100% { background-color: green; }
}
注：浏览器支持性不做介绍，具体使用时请做具体测试。