动画 animate

本质是快速切换大量图片是在人脑中形成的具有连续性的画面，构成动画的最小单元：帧或者动画帧。

• MDN文档

定义动画

• 方式1

@keyframes animate_name
{
    from {}
    to{}
}

• 方式2

@keyframes animate_name
{
    0% {}
    25% {}
    50% {}
    75% {}
}

使用动画

• animation : 动画名称 动画时间 速度曲线 延迟时间 播放次数 动画方向 执行完毕时状态

.box{
    animation: animate_name 1s;
}

动画-动画名称

.box{
    animation_name: name;
}

动画-动画时间

.box{
    animation-duration: name;
}

动画-速度曲线

.box{
    animation-timing-function: linear;
}

参数说明

• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• steps 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。

动画-延迟时间

.box{
    animation-delay: 10s;
}

动画-播放次数

.box{
    animation-iteration-count: 3;
}

动画-动画方向

.box{
    animation-direction: normal;
}

动画-执行完毕时状态

.box{
    animation-fill-mode: forwards;
}