CSS3动画功能

CSS3中的动画功能分为Transitions功能与Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。
Transitions功能支持从一个属性值平滑过渡到另一个属性值，Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

Transitions功能

Transitions功能的使用方法

Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能，可通过transitions属性来使用Transitions功能。

// transition属性的使用方法
transition:property duration timing-function

其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡， timing-function表示通过什么方法来进行平滑过渡。


示例文字

上面的代码当鼠标指针移动到div元素上时，在1秒内div元素的背景色会从黄色平滑过渡到浅蓝色。
在CSS3中，还有另外一种使用Transitions功能的方法，就是将transitions属性中的三个参数改写成transitíon-property属性、transition-duratíon属性、transition-timing-function属性，这三个属性的含义及属性值的指定方法与transitíons属性中的三个参数的含义及指定方法完全相同。

-webkit-transition-property:background-color;
-webkit-transition-duration:1s;
-webkit-transition-timing-tunction:linear;
-moz-transition-property:background-color;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:18;
-o-transition-timing-function:linear;

使用Transitions功能同时平滑过渡多个属性值

可以使用Transitions功能同时对多个属性值进行平滑过渡。


示例文字

上面的代码当鼠标指针放到div元素上时，在1秒内完成了div元素的背景色、字体色和宽度这三个属性值的平滑过渡。
另外，可以通过改变元素的位置属性值、实现变形处理的transform属性值来让元素实现移动、旋转等动画效果。

上面的示例中有一个div元素，div元素中有一张图片，当鼠标指针停留在图像上时，图像会向右移动30px，并且顺时针旋转720度。

Animations功能

Animations功能的使用方法

Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果的。区别在于：使用Transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果，而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。


示例文字

使用Animations功能的时候，如果使用的是Safari或Chrome浏览器，会使用如下所示的方法来创建关键帧的集合。

@-webkit-keyframes 关键帧集合名{ 创建关键帧的代码 }

关键帧的集合创建好之后，在元素的样式中使用该关键帧的集合。

div:hover{
    animation-name:mycolor;
    animation-duration:5s;
    animation-timing-function:linear;
    -webkit-animation-name:mycolor;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

在animation-name属性中指定关键帧集合的名称；在animation-duratiion属性中指定完成整个动画所花费的时间；在animation-timing-function属性中指定实现动画的方法。

实现多个属性值同时改变的动画

如呆要想实现让多个属性值同时变化的动画，只需在各关键帧中同时指定这些属性值就可以了。


示例文字

animation的属性

属性	描述	描述
animation	所有动画属性的简写属性
animation-name	指定要绑定到选择器的关键帧的名称	none
animation-duration	规定动画完成一个周期所花费的秒或毫秒	默认0
animation-timing-function	指定动画将如何完成一个周期	默认"ease"
animation-delay	定义动画开始前等待的时间	可选，默认0，以秒或毫秒计
animation-iteration-count	定义动画应该播放多少次	infinite：指定动画播放无限次默认1
animation-direction	规定动画是否在下一周期逆向地播放	normal：默认值，动画按正常播放 reverse：动画反向播放 alternate：动画在奇数次正向播放，在偶数次反向播放 alternate-reverse：动画在奇数次反向播放，在偶数次正向播放
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式	默认值none
animation-play-state	指定动画是否正在运行或已暂停	paused：指定暂停动画 running：默认值，指定正在运行的动画

animation简写形式：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-fill-mode的取值

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）
both	动画遵循forwards和backwards的规则。也就是说，动画会在两个方向上扩展动画属性

实现动画的方法

方法	属性值的变化速度
linear	在动画开始时到结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值