> 本文作者：刘军，叩丁狼高级讲师。原创文章，转载请注明出处。 ###1.内置调速函数实现弹跳动画 **1.实现一个弹跳动画（模拟自由落体）**  ```html ``` 1. `animation: bounce 3s ease-in;` 动画默认的调速函数是：减速->加速，适合下落 2. `60%,80%,to{ xxx ;animation-timing-function: ease-out}` 在对应的关键帧盖默认的ease-in调速函数 ``` 1. 0-60% ( 0 - 350px) ease-in 减速->加速 2. 60%-70% ( 350px - 250px ) ease-out 加速->减速 3. 70% - 80% ( 250px - 350px ) ease-in 减速->加速 4. 80% - 90% ( 350px - 300px ) ease-out 加速->减速 5. 90% - 100% ( 300px - 350px ) ease-in 减速->加速 ``` 3. 运行代码。可以发现已经达到预期的效果（让下落时是加速，反弹时时减速） > 思考：调速函数系统内置只有五个? 那能不能自己编写调速函数？ 那如何编写？ ### 2.自定义调速函数实现弹跳动画 ####1.cubic-bezier()函数简介 ​ 除了系统内置的5个调速函数之外，CSS 提供了一个 **cubic-bezier()** 函数，允许我们指定**自定义的调速函数**。它接受四个参数，分别代表两个控 制锚点的坐标值，我们通过这两个控制锚点来指定想要的贝塞尔曲线。语 法形式是这样的:**cubic-bezier(x1, y1, x2, y2)**，其中 **(x1, y1)** 表示第一 个**控制锚点**的坐标，而**(x2, y2)**是第二个。 曲线片断的两个端点分别固定在(0,0) 和 (1,1)，前者是整个过渡的起点(时间进度为零，动画进度为零)， 后者是终点(时间进度为 100%，动画进度为 100%)。 例如：`cubic-bezier( 0.25, 0.1 , 0.25, 1) ` 函数对应的曲线  [在线可视化界面描述cubic-bezier()函数网站](http://cubic-bezier.com/) ####2.自定义下落调速函数 `cubic-bezier(0.71,0.36,1,0.48)` 函数对应的**贝塞尔曲线**如下：  减速 -> 加速 （符合下落动画） （0.71 , 0.36）红色坐标的 （1 , 0.48 ）浅蓝色坐标点 ####3.自定义反弹调速函数 `cubic-bezier(0.17,0.67,0.49,0.97)` 函数对应的**贝塞尔曲线**如下：  加速 ->减速 （符合反弹动画） #### 4.使用自定义调速函数 ```html ``` 1. `animation: bounce 3s cubic-bezier(.71,.36,1,.48);` 动画的调速函数是：减速->加速，适合下落 2. `60%,80%,to{ xxx ;animation-timing-function: cubic-bezier(.17,.67,.49,.97)}` 在对应的关键帧盖默认的`cubic-bezier(.17,.67,.49,.97)`调速函数 3. 运行代码。可以发现已经达到预期的效果（让下落时是加速，反弹时时减速） ​