CSS3中的动画功能之transtions和animations详解
Transitions和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。
一.Transitions
语法：transitions: property duration timing-function
- property: 表示对哪个属性进行平滑过渡(可设置为all，则所有属性值变化时均产生动画效果)
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
样例代码：
transitions: background-color 1s linear;
可同时设置多个属性值：
样例代码：
transitions: background-color 1s linear, color 1s linear, width 1s linear;
可同时设置所有属性值：
样例代码:
transitions: all 1s linear;
二 .Animations
语法：animations: name duration timing-function iteration-count;
- name: 关键帧集合名（通过此名创建关键帧的集合，见下面样例代码）
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
- iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1
样例代码：
.box {
background-color: red;
-webkit-animation: mycolor 4s linear infinite;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: green;
}
}
三.实现动画的方法
- linear 在动画开始时到结束时以同样的速度进行改变
- ease-in 动画开始时速度很慢，然后速度沿曲线值加速
- ease-out 动画开始时速度很快，然后速度沿曲线值减速
- ease 动画开始速度很慢，然后速度沿曲线值加速，然后再沿曲线值减速
- ease-in-out 同ease
注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。