ps：先说点题外话，因为工作的原因很久没更新博客了，最近也是告一段落，处理一了一些事情之后可以安心坐下来，把我的博客重新整理一下。

今天要讲的是 css3 的一个新属性 animation，也算是一个回顾吧，我只是将平时如何使用，以及一些技巧分享出来。如果想学习更基础的内容，可以点击链接：https://www.runoob.com/css3/css3-animations.html，网上类似的教程还是蛮多的。

这篇文章并不细讲动画的基础属性，而是稍微扩展一个话题：怎么让 css3 里面的动画属性看起来更流畅？

当然在讲之前还是要简单介绍一下 animation 基本属性。

animation 属性

animation 属性有下面几个值：

  1. @keyframes | 动画本身（最重要的）
  2. animation-name | 动画的名称
  3. animation-duration | 动画所经历的时间
  4. animation-fill-mode | 当属性为 forwards 时，动画停留在最后一帧

动画主要可以用于一些官网特效，或者自适应的布局。

如何写一个最基本的动画

动画就是由一个状态到另一个状态的过程，比如从左到右的一个移动过程。

首先要先了解各个属性具体的作用是什么，就拿从白到黑举个例子吧，首先写一个 @keyframes 的动画过程。

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

这段代码的意思就是有一个名为 leftright 的动画，将容器从左到右移动了 100px。

然后我们进一步补全这个动画。

<!DOCTYPE html>
<html>
<head>
    <title>动画</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

然后我们到浏览器跑一下这个页面试试看，可以看到一个黑色的方块从左右移动了 100px 的距离，总计 1 秒完成。

但是这个动画结束的很突兀，容器突然回到原地，这是为什么呢？因为我们没有保留最后一帧，这需要一个属性，最上面我们讲过了。

.demo {
    width: 100px;
    height: 100px;
    background: #fff;
    animation-name: leftright; /* 将动画的名称绑定到该标签 */
    animation-duration: 1s;     /* 给动画的过程设一个时长 */
    animation-fill-mode: forwards; /* 动画停留在最后一帧 */
}

运行一下，可以看到动画最后停住了。

让动画拥有一个惯性

我们仔细观察这个动画，发现他整个过程不拖泥带水，很迅速的完成了，但是我发现一个问题，整个过程不流畅圆滑，很死板，从左到右，一点也不圆滑。

分析一下，因为缺少了一个日常生活的习惯动画，那就是惯性，这个属性可不存在啊，没法直接设置，只能通过动画本身的属性来进行调整，继续看这一段代码。

 @keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

0%代表开始，100%代表结束，他们指的是一个时间节点，在这个时间点动画要运行到他们指定的位置。

所以我们可以添加一个新的时间节点，50%，我们让当时间过了一半的时候，方块运行到 120px 的位置，然后再折回来。

下面是完整的代码，可以复制到本地，自己运行一下试试看。

<!DOCTYPE html>
<html>
<head>
    <title>动画</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(120px);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

修改完之后，到浏览器看一下效果。

是不是流畅了很多，有了一种惯性的感觉，这一点在工作中如何遇到写动画的需求就很关键了，怎么让用户的体验更强，是一门技巧。

虽说这都是一些基础的东西，但是我觉得体验感上去了，网站的回头率才会更高。打一个比方，去某个商城网站购物，整个页面看起来很舒服，特效细节很流畅，是不是就增加了购物的欲望。虽然这么说很浅薄，但是真的会有一些心里作用。

如何用好动画特效，是一门学问，将 css 玩出花样来，可不是那么简单的。