CSS3动画

一、animation属性

作用：animation属性是一个简写属性，用于设置六个动画属性
语法：animation:name duration timing-function delay iteration-count direction
说明：

animation-name 规定需要绑定到选择器keyframe名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画

注意：请始终规定animation-duration属性，否则时长为0，动画不会播放

示例：

div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    /* Safari and Chrome */
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
  }
  @-webkit-keyframes mymove{
    from{left: 0;}
    to{left:200px}
  }
  @keyframes mymove{
    from{left: 0;}
    to{left:200px}
  }

二、@keyframes属性

作用：通过@keyframes规则，创建动画
说明：创建动画的原理是，将一套CSS样式逐渐变化为另一套样式，在动画过程中，能够多次改变这套CSS样式，以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%，0%是动画的开始时间，100%是动画的结束时间
注意：请使用动画属性来控制动画的外观，同时将动画与选择器绑定

示例：

div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
  }
  @keyframes mymove{
    0%{top: 0px;}
    25%{top: 200px;}
    75%{top: 50px;}
    100%{top: 100px;}
  }

三、animation-name属性

作用：animation-name属性为@keyframes动画规定名称
语法：animation-name:keyframes | none
说明：keyframes规定需要绑定到选择器的keyframes的名称，none规定无动画效果

四、animation-duration属性

作用：animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计
语法：animation-duration:time
说明：time规定完成动画所花费的时间，默认值是0，意味没有动画效果

五、animation-timing-function属性

作用：animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套CSS样式变成另一套所用的时间。速度曲线用于使变化更为平滑
语法：animation-timing-function:value
说明：animation-timing-function使用名为三次贝塞尔函数的数学函数，来生成速度曲线，你可以在该函数中使用自己的值，也可以预定义的值：linear动画从头到尾的速度是相同的，ease默认，动画以低速开始，然后加快，在结束前变慢，ease-in动画以低速开始，ease-out动画以低俗结束，ease-in-out，动画以低速开始和结束，cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值，可能的值是从0到1的数值

六、animation-delay属性

作用：animation-delay属性定义动画何时开始，animation-delay值以秒或毫秒计
语法：aniamtion-delay:time;
说明：time可选，定义动画开始前等待的时间，以秒或毫秒计，默认值为0

七、animation-iteration-count属性

作用：animation-iteration-count属性定义动画的播放次数
语法：animation-iteration-count:n | infinite;
说明：n定义动画播放次数的数值，infinite规定动画应该无限次播放

八、animation-direction属性

作用：定义是否应该轮流反向播放动画
语法：animation-direction:normal | alternate;
说明：normal默认值，动画应该正常播放，alternate动画应该轮流反向播放
注释：如果把动画设置为只播放一次，则该属性没有效果

九、animation-plya-state属性

作用：animation-play-state属性规定动画正在运行还是暂停
语法：animation-play-state: paused | running;
说明：paused规定动画已暂停，running规定动画正在播放
注释：可以在javascript中使用该属性，这样就能在播放过程中暂停动画

十、animation-fill-mode属性

作用：animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见
语法：animation-fill-mode:none | forwards | backwards | both;
说明：none不改变默认行为，forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义），backwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义），both向前和向后填充模式都被应用

十一、will-change

作用：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
语法：will-change:auto |
说明：auto表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化
可以是以下值：
scroll-position 表示开发者希望在不久后改变滚动条的位置或者使之产生动画
contents 表示开发者希望在不久后改变元素内容中的某些东西，或者使他们产生动画
表示开发者希望在不久后改变指定的属性名或者使之产生动画，如果属性名是简写，则代表所有与之对应的简写或者全写的属性