CSS3动画-动画

animation 属性是一个简写属性，用于设置六个动画属性：
（1）、animation-name：需要绑定到选择器的 keyframe 名称
（2）、animation-duration：完成动画所需要的时间
（3）、animation-timing-function：动画的速度曲线,，其中有6个值
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
（4）、animation-delay：动画开始之前的延迟
（5）、animation-iteration-count：动画的播放次数
n 定义动画播放次数的数值
infinite 规定动画应该无限次播放
（6）、animation-direction：是否应该轮流反向播放动画
normal 默认值，动画应该正常播放
alternate 动画应该轮流反向播放

下面的例子所产生的动画演示了一个正方形沿着正方形边框移动的效果。

div{
    width:100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation:anmi 5s infinite alternate;//动画名为anmi，播放时间为5s，反向循环播放
    -webkit-animation:anmi 5s infinite alternate;//safari、chrome浏览器适配

}

@keyframes anmi{
    0%{background-color:red;left:0;top:0px}
    25%{background-color:blue;left:100px;top:0px}
    50%{background-color: #000000;left: 100px;top:100px}
    75%{background-color: gold;left: 0px;top:100px}
    100%{background-color: red;left: 0px;top: 0px;}
}//分别设置不同时间的动画效果

@-webkit-keyframes anmi {
     0%{background-color:red;left:0;top:0px}
     25%{background-color:blue;left:100px;top:0px}
     50%{background-color: #000000;left: 100px;top:100px}
     75%{background-color: gold;left: 0px;top:100px}
     100%{background-color: red;left: 0px;top: 0px;}
 }//safari、chrome浏览器适配