CSS3动画

动画是CSS3中新增功能，CSS3中动画分为两种，分别是transitions和animations，transitions实现的动画是从一种属性值从一个值到另外一个值的动画效果，而animations可实现不止两个值的动画效果，即更加复杂的动画。以背景颜色举例，transitions只能实现背景色从一种颜色到另外一种颜色的动画效果，而animations通过关键帧能实现从颜色1过渡到颜色2，然后过渡到颜色3....的动画效果。

transitions动画

首先，看一下个浏览器对transitions的支持情况：

浏览器对transitions的支持情况

transitions包含的属性有：transition-property、transition-duration、transition-timing-function、transition-delay。

transition-property：设置动画效果的css属性名称，默认值为all；

transition-duration：动画持续时间，单位为秒或毫秒，默认值为0；

transition-timing-function：动画效果的速度曲线，默认值为ease；

transition-delay：动画延迟多久开始执行，默认值为0；

可将这四个属性简写成transition属性:

transition: property duration timing-function delay;如果需要同时对多个属性设置动画，可用逗号进行分隔。例如transition：color 1s ease, background-color 1s ease;

animations动画

前面提到，animation是通过关键帧实现动画效果的，那么首先说明一下关键帧，关键帧就是动画效果中的节点，然后在各个节点间顺序进行平滑过渡。使用@keyframes 定义关键帧集合，其格式如下：

@keyframes 关键帧集合名 {

        关键帧代码

}

仍然使用背景颜色举例说明，如果想实现背景色从红色变成绿色，然后变成蓝色，最后再变成红色的动画效果，代码如下：

@keyframes myColor {

        0% {

                background-color: #ff0000;

        }

        40%{

                background-color: #00ff00;

        }

        70%{

                background-color:#0000ff;

        }

        100%{

                background-color: #ff0000;

        }

}

myColor关键帧集合中定义了4个关键帧，0%为开始帧，100%为结束帧，40%表示动画过程执行到40%时的状态，70%类似。如果想用自定义的关键帧集合实现动画效果，需要将关键帧应用到animations动画上，animations动画包含属性animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state等。

animation-name：动画名称，即关键帧集合名；

animation-duration：动画持续时间，默认值为0；

animation-timing-function：动画的速度曲线，默认值为ease；

animation-delay：动画延迟多久开始执行，默认值为0；

animation-iteration-count：动画循环次数，默认值为1，如果值为infinite，则表示动画无限次循环；

animation-direction：定义是否循环交替反向播放动画。如果animation-iteration-count值为1，则该属性不起作用。默认值为normal，即正常播放；如果取值reverse，则表示反向播放；如果取值alternate，则动画在奇数次正向播放，在偶数次反向播放；如果取值alternate-reverse，则动画在奇数次反向播放，在偶数次正向播放。

animation-play-state：定义动画是否正在运行或者已暂停，默认值为running，paused表示动画暂停。