在 CSS 动画里，animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么 animation-timing-function 表述的就是车在运动中的加速和减速等过程。已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是 ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 ease-out，动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。

给 id 为 ball1 和 ball2 的元素添加 animation-timing-function，ball1 赋值为 linear，ball2 赋值为 ease-out。它们的 animation-duration 都为 2 秒，注意观察它们在开始和结束时的不同。

```yml tests: - text: 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。' testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。'); - text: 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 ease-out。' testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 ease-out。'); ```