前言

html网页中的动画效果，可以使用CSS中“@keyframes”定义关键帧动画，也就是定义一些初始状态、中间状态、介绍状态，然后使用animation来完成动画的显示。首先来看一下animation有哪些可以设置的属性：

1、animation-name 动画名称
2、animation-duration 动画时间
3、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
4、animation-delay 动画延迟
5、animation-iteration-count 动画播放次数 n|infinite
6、animation-direction 动画结束后是否反向还原 normal|alternate
7、animation-play-state 动画状态 paused(停止)|running(运动)
8、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)

以上的属性可以分别单独设置属性值，也可以通过下面的方式一起设置属性值：
animation:name duration timing-function delay iteration-count direction;同时设置多个属性。

下面我们来看一个具体的例子，比如，来实现一个数据加载时的缓冲效果，有时候会看到数据正在加载时显示出来的动画效果。

先来看一下静止时的状态，这五个颜色不一样的长条长度一致，开始前状态如下图：

我们要实现的动画效果是五个长条的长度会依次变化来模拟数据正在加载的效果，开始时的动态效果如下图：

具体的实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>loading</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: 100vw;
            height: 100vh;
            background-color: grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #box {
            height: 160px;
            width: 300px;
            background: white;
            text-align:center;
        }

        #box div{
            width:30px;
            height:100px; 
            float: left;
            margin:15px;
            background-color:gold;
            border-radius:15px;
            animation:loading 500ms ease infinite alternate;
        }
        #box div:nth-child(1){
            background-color:red;
        }
        #box div:nth-child(2){
            background-color:green;
            animation-delay:100ms;
        }
        #box div:nth-child(3){
            background-color:pink;
            animation-delay:200ms;
        }

        #box div:nth-child(4){
            background-color:lightgreen;
            animation-delay:300ms;
        }

        #box div:nth-child(5){
            background-color:lightblue;
            animation-delay:400ms;
        }

        @keyframes loading{         
            from{
                transform:scale(1,1);
            }
            to{
                transform:scale(1,0.5);
            }
        }

    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading....</p>
    </div>
</body>
</html>

以上的代码实现了一个模拟数据加载的动态效果，感兴趣的朋友可以去自行尝试一下。