CSS3动画

CSS3动画属性

在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。但是这两者又有很大的区别：transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果

@keyframes简介

使用animation属性定义CSS3动画需要2步：
（1）定义动画；
（2）调用动画；
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：

<style type="text/css">
@keyframes 动画名 {
    0% {
        ……
    }
    100% {
        …… 
    }
}
</style>

说明：0%表示动画的开始，100%表示动画的结束。0%和100%是必须的，不过在一个@keyframes规则中可以由多个百分比构成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果
小技巧：使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比的话，这时0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 @keyframes</title>
    <style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

分析：
- （1）定义动画
- 这里我们使用@keyframes规则定义了一个名为mycolor的动画，刚刚开始时背景颜色为红色，从0%到30%之间背景颜色从红色变为蓝色，然后从30%到60%之间背景颜色从蓝色变为黄色，最后在60%到100%之间背景颜色从蓝色变为绿色。动画执行完毕，背景颜色回归红色（初始值）
- 很多新手会有疑问，这些百分比是什么意思，是相对什么来说的呢？哪还有什么，肯定是相对“持续时间animation-duration啦！例如这个例子里面，我们定义持续时间为5s，则0%指的是0s（开始时），30%指的是1.5s的时候，60%指的是3s的时候，100%则指的是5s（结束时）。假如我们定义持续时间为10s，那么0%指的是0s（开始时），30%指的是3s的时候，60%指的是6s的时候，而100%则指的是10s（结束时）以此类推
- （2）调用动画
- 我们可以使用@keyframes规则定义动画，但是这样定义的动画并不会自动执行，我们还需要“调用动画”，这样动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。这个例子中，我们设置在鼠标移动到div元素时（div:hover）使用animation-name属性调用动画名，然后使用animation-duration属性定义动画持续总时间、animation-timing-function属性定义动画函数等

调用动画animation-name

在CSS3中，使用@keyframes规则定义的动画并不会自动执行，我们还需要使用animation-name属性来调用动画，之后动画才会生效。
语法：animation-name：动画名;
说明：注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果

持续时间animation-duration

在CSS3中，我们可以使用animation-duration属性来设置动画的持续时间，也就是完成从0%到100%所使用的总时间。animation-duration属性跟CSS3过渡中的transition-duration属性相似
语法：animation-duration:时间;
说明：animation-duration属性取值是一个时间，单位为s（秒），可以为小数如0.5s
CSS3动画很多时候都是跟CSS3变形结合起来，然后实现绚丽复杂的动画效果

播放方式animation-timing-function

在CSS3中，我们可以使用animation-timing-function属性来设置动画的播放方式，所谓的“播放方式”主要用来指定动画在播放时间内的速率
语法：animation-timing-function：取值;
说明：animation-timing-function属性取值跟transition-timing-function属性取值一样，共有5种，具体如下：

animation-timing-function属性取值
举例：

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

通过这个例子，我们可以直观地比较出这5种播放方式的不同。大家在实际开发，根据自己想要的效果自行选取哪一种播放方式。

延迟时间animation-delay

在CSS3中，我们可以使用animation-delay属性来定义动画播放的延迟时间。其中，animation-delay属性跟CSS3过渡中的transition-delay属性相似
语法：animation-delay:时间;
说明：animation-delay属性取值是一个时间，单位为s（秒），可以为小数如0.5s
animation-delay属性默认值为0，也就是说当我们没有设置animation-delay属性时，CSS3动画就没有延迟时间

播放次数animation-iteration-count

在CSS3中，我们可以使用animation-iteration-count属性来定义动画的播放次数。
语法：animation-iteration-count取值;
说明：animation-iteration-count属性取值有2种：
（1）正整数；
（2）infinite；
animation-iteration-count属性默认值为1。也就是默认情况下，动画从开始到结束只播放一次。“animation-iteration-count:n”表示动画播放n次，n为正整数；当animation-iteration-count属性取值为infinite时，动画会无限次地循环播放

播放方向animation-direction

在CSS3中，我们可以使用animation-direction属性定义动画的播放方向。
语法：animation-direction取值;
说明：animation-direction属性取值如下：

animation-direction属性取值

动画播放状态animation-play-state

在CSS3中，我们可以使用animation-play-state属性来定义动画的播放状态。
语法：animation-play-state取值;
说明：animation-play-state属性取值只有2个：running和paused
（1）running 播放动画（默认值）
（2）paused 暂停动画

时间外属性animation-fill-mode

在CSS3中，我们可以使用animation-fill-mode属性定义在动画开始之前和动画结束之后发生的事情
语法：animation-fill-mode取值;
说明：animation-fill-mode属性取值如下：

animation-fill-mode属性取值
举例

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-fill-mode属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
            -webkit-animation-duration:2s;
        }
        #div2
        {
            -webkit-animation-fill-mode:forwards;
        }
        #div3
        {
            -webkit-animation-fill-mode:backwards;
        }
        #div4
        {
            -webkit-animation-fill-mode:both;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

一般情况下，对于animation-fill-mode属性，我们只会用到forwards和backwards这两个属性值。而对于如何理解“animation-fill-mode:both;”，可以找度娘亲热一下，反正这个属性值也没什么卵用