小猴子跌落山崖之 linear、ease、ease-in

今天通过一个小猴子跌落山崖的过程来学习一下 animation-timing-function，我做了一个 demo，效果如下：

无论做移动端还是前端的动画，都会频繁地接触 linear、ease、ease-in、ease-out、ease-in-out 这些函数，那么它们究竟有哪些区别，今天这节内容一探究竟。

先明确一点 ease != easy。

可以把动画看做是由「多张图片组成」的一个集合，以一定速度来切换这些图片，会给人产生一种图片在动的幻觉。而 linear、ease 这些关键字就是用来控制这些图片以多快的速度来切换，比如 0.1s 内「匀速」地切换 5 张图片，0.1s 内先慢后快切换 5 张图片。

linear、ease、ease-in、ease-out、ease-in-out 这些其实是一些关键字，它的本质是缓冲函数 cubic-bezier (x1, y1, x2, y2) ，比如 linear 与 cubic-bezier (0, 0, 1, 1) 等价。我把这些关键字称为以「傻瓜式」的方式来帮助你完成动画的设计。我先解释下这些关键字的作用：

1、linear =>