animationx详解

　　animation是CSS3中极其强大的功能，它可以完成许多炫酷有趣的动画效果，网上也有非常不错的类库。下面将做详细介绍。

1.@keyframes:用于定义动画的具体动作（帧动作），一般要加上浏览器前缀。

2.animation-name:给动画定义名称，用于在元素调用动画对象

3.animation-duration:设置动画动作持续的时间

4.animation-timing-function:动画的过渡速度

　　取值：ease(默认值),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)

5.animation-delay:设置动画延迟时间

　　通过以上5点，就可以开始做简单的动画了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: #f00;
            animation-name:fromLeftToRight;    /*调用名为fromLeftToRight的动画*/
            animation-duration:1s;   /*动画持续1s*/
            animation-timing-function:ease;  /*逐渐变慢*/
            animation-delay:0.4s;    /*延迟0.4s后执行*/
        }

        @keyframes fromLeftToRight{   /*定义动画的名称，以下为动画具体动作*/
            from{
                margin-left:0px;
            }
            to{
                margin-left:100px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　此时动画只会在页面内执行一次，若想动画持续循环执行，那么就要用到以下属性

6.animation-iteration-count:设置动画执行次数

　　取值：number 或 infinite(无限)

　　给上述代码添加属性，那么结果将会是：

animation-iteration-count:infinite;

　　能看出动画在进行无限次循环运动，美中不足的是当运动到达margin-left:100px的位置时，动画重置，再继续运动，看起来非常生硬，此时我们可以添加一个往返运动的效果，让画面看起来更平滑。

7.animation-direction:设置动画在循环运动中的执行方向

　　取值：normal(正常方向)

reverse(反向运动)

alternate(先正常运行，再反向运行)

alternate-reverse(先反向运行再正常运行)

　　再代码中继续添加属性：

animation-direction:alternate;   /*往返运动*/

　　这样看起来效果就好多了。这种效果是固定不变的，然而在应用中，动画效果在更多的情况下是为了与用户进行交互，从而提升应用的用户体验，所以接下来介绍一个与交互相关的属性。

8.animation-play-state:设置动画对象的运动状态(暂停/运行)

　　取值：paused(暂停)

running(运行)

　　来，我们继续折腾上面的代码。

div:hover{       
     animation-play-state:paused;   /*鼠标经过时动画暂停*/
}

是男人就拿鼠标撩我

　　正常情况下，若animation-iteration-count:1的时候，动画结束将重置，这将造成非常不好的用户体验，此时我们可以通过一个属性来控制对象在运动结束后的状态。

9.animation-fill-mode:设置动画时间之外的状态，如定格结束后的状态(forwards)。

　　取值：none　　不设置

　　　　 forwards　　设置对象状态为动画结束时的状态

　　　　 backwards 设置对象状态为动画开始时的状态

　　　　 both　　设置对象状态为动画结束或开始的状态

　　想不出太好的例子，我们还是继续撸上面的代码吧。搞起：

animation-iteration-count:1;  /*也可以不设置此属性，则默认为1*/
animation-fill-mode:forwards; /*将运动的最后状态作为结束状态*/

　　其中只有 name 和 duration 是必填属性。那么页面中最上面的一段代码可缩写为：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: #f00;
            animation-name:fromLeftToRight 1s ease 0.4s;  /*是不是简洁多了？*/
        }

        @keyframes fromLeftToRight{   /*定义动画的名称，以下为动画具体动作*/
            from{
                margin-left:0px;
            }
            to{
                margin-left:100px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>