怎么让 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 玩出花样来，可不是那么简单的。
用户必须遵守《计算机软件保护条例(2013修订)》第十七条：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。鉴于此条例，用户从本平台下载的全部源码（软件）教程仅限学习研究，未经版权归属者授权不得商用，若因商用引起的版权纠纷，一切责任均由使用者自行承担，本平台所属公司及其雇员不承担任何法律责任。
前端与后端开发高频疑难问题 » 怎么让 css3 里面的动画属性看起来更流畅？
