九、动画

9.1 定义动画@- keyframes

定义动画：

需要添加前缀

@-浏览器前缀-keyframes 动画名称{
from{ } 开始帧
to{ }  结束帧
}

key：关键

frame：帧

每一帧书写的属性必须一一对应。

/* 定义动画 */
@-webkit-keyframes donghua {
    /* 每一帧状态书写 */

    /* 开始帧 */
    from {
        width: 200px;
        background-color:lightblue;
    }
    /* 结束帧 */
    to {
        width: 600px;
        background-color: green;
    }
}

9.2 调用动画 animation

animation 调用动画

需要添加浏览器前缀

第一个参数：动画名称

第二个参数：动画完成时间。单位：s （表示从动画开始到结束一次动画完成时间）

第三个参数：缓冲描述 linear ease 贝塞尔曲线

第四个参数：延迟时间。单位 s （只有最开始有延迟时间不写默认为0s）

第五个参数：动画次数（数字默认一次可以定义任意次数 infinite无限次）

第六个参数：自动补全反方向动画（alternate 添加自动补全，反方向也算一次动画）

第七个参数：保持最后一帧的状态（forwards 使用此参数不能设置无限次）

参数不写，则为默认值

.box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 100px;
            /* 调用动画 */
            -webkit-animation:donghua 5s linear 0s 3 alternate forwards;
        }

9.3 百分数定义动画

表示在整个动画中在该时间动画完成状态。

/* 定义动画 */
@-webkit-keyframes donghua {
    /* 每一帧状态书写 */

    /* 开始帧 */
    0% {
        width: 200px;
        background-color:lightblue;
    }
    /* 中间段 */
    10% {
        width: 400px;
        background-color: red;
    }
    30% {
        width: 600px;
        background-color: yellow;
    }
    90% {
        width: 100px;
        background-color: pink;
    }
    /* 结束帧 */
    100% {
        width: 600px;
        background-color: green;
    }
}

从0%——100%是一次动画 0%相当于from 100%相当于to

9.4 动画属性

animation-play-state：paused

play 播放

state 状态

paused 暂停

/* 暂停 */
.box:hover img {
    -webkit-animation-play-state: paused;
}