ps：先说点题外话，因为工作的原因很久没更新博客了，最近也是告一段落，处理一了一些事情之后可以安心坐下来，把我的博客重新整理一下。
今天要讲的是 css3 的一个新属性 animation，也算是一个回顾吧，我只是将平时如何使用，以及一些技巧分享出来。如果想学习更基础的内容，可以点击链接：https://www.runoob.com/css3/css3-animations.html，网上类似的教程还是蛮多的。
这篇文章并不细讲动画的基础属性，而是稍微扩展一个话题：怎么让 css3 里面的动画属性看起来更流畅？
当然在讲之前还是要简单介绍一下 animation 基本属性。
animation 属性
animation 属性有下面几个值：
- @keyframes | 动画本身（最重要的）
- animation-name | 动画的名称
- animation-duration | 动画所经历的时间
- 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 玩出花样来，可不是那么简单的。