动画

什么是动画

CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分：

  • 用于定义动画的样式规则
  • 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点:
    • 能够非常容易地创建简单动画，甚至不需要掌握JavaScript。
    • 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。
    • 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。

定义动画序列

@keyframes声明动画

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

1
2
3
@keyframes <keyframes-name>{
    <keyframe-block-list>
}

  • keyframes-name

    用于设置当前动画的名称，以便通过animation-name属性调用。

  • keyframe-block-list

    用于设置动画执行过程中的关键帧。

实现动画

动画执行完成后回归原始状态且不需要触发条件。

  1. 设置关键帧动画的名称（至少要包含两个 开始和结束）

    其中过程的关键字(from、to)可用百分比替换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @keyframes animate{
        from{
            width: 200px;
            height: 200px;
        }
        to{
            width: 400px;
            height: 400px;
        }
    }

  2. 通过animation相关属性实现动画效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .box{
        width: 200px;
        height: 200px;
        background: lightcoral;
        /* 设置执行动画的名称 与关键帧对应 */
        animation-name: animate;
        /* 动画执行的时间 */
        animation-duration: 2s;
    }

    以上两个子属性可简写为一个属性

    1
    animation: animate 2s;

多个动画

如果设置多个动画，名称、时间需用逗号分隔。

1
2
animation-name: animate1,animate2;
animation-duration: 1s,4s;

动画执行的次数

animation-iteration-count属性控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    width: 200px;
    height: 200px;
    background: lightcoral;
    animation-name: animate;
    animation-duration: 1s;
    /* infinite表示永久执行  可设置整数 也可设置小数：会执行一段就结束 */
    animation-iteration-count: infinite;
    /*
    animation-iteration-count: 2;
    animation-iteration-count: 2.3;
    */
}

动画执行的方向

1
2
3
4
5
6
7
8
/* 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始 默认值 */
animation-direction: normal;
/* 动画交替反向运行，反向运动时，动画起步后退，同时，带时间功能的函数也反向。 */
animation-direction: alternate;
/* 反向运动动画，每周期结束动画由尾到头运行 */
animation-direction: reverse;
/* 反向交替，反向开始交替 动画第一次运行时是反向的， 然后下一次是正向，后面依次循环。 */
animation-direction: alternate-reverse;

测试的次数均为无限次。

  • normal

    默认值 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始

  • alternate

    动画交替反向运行，反向运动时，动画起步后退，同时，带时间功能的函数也反向。

  • reverse

    反向运动动画，每周期结束动画由尾到头运行

  • alternate-reverse

    反向交替，反向开始交替 动画第一次运行时是反向的， 然后下一次是正向，后面依次循环。

动画执行的状态

1
2
3
4
/* 运行 */
animation-play-state: running;
/* 暂停 */
animation-play-state: paused;

设置动画时间外属性

animation-fill-mode:属性用于设置动画执行之前和执行之后如何为动画的目标元素应用样式。

此属性可设置的值为：

  • none

    不改变默认行为。

  • forwards

    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

  • backwards

    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

  • both

    向前和向后填充模式都被应用。