css3--动画

动画（animation）可以通过设置多个节点来精确控制一个或一组动画，用来实现比较复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

一、动画的基本使用

制作动画分为两步：1、先定义动画

2、调用动画

1、用skyframes定义动画

@keysframes 动画名称 {

      0% {

                 width；100px；

}

       100% {

                width：200px；

}

}

 0%是动画的开始，100%是动画的完成。这个规则就是动画序列

动画是使元素从一种样式逐渐变成另一种样式的效果，可以更改多的样式多的次数

from和to等同于0%和100%

元素使用动画

    div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画：1、动画名称  2、持续时间 */
            animation-name: move;
            animation-duration: 2s;
         }   

二、动画常用属性：

细讲：

animation-iteraation-count：规定动画的播放次数，可写数字，如果想无限播放infinte

animation-direction：规定动画是否在下一周期逆序播放，默认为normal不逆序播放，逆序播放为alternate

animation-play-state：规定动画是否暂停，默认是running不暂停，paused暂停（一般配合鼠标经过使用）

animation-fill-mode：规定动画结束后的状态：回到起点是backwards（默认），在终点固定不动是forwards

三、动画简写

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

四、动画速度曲线

animation-timing-function是动画的速度曲线，默认是‘ease’

写法：

animation-timing-function：easa；

 属性：

linear匀速的，从头到尾都是平缓的速度

ease默认的，一开始慢中间快结尾慢

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始低速结束

steps（）： 指定了时间函数所需要的步长（经常使用，可以做出关键帧动画）