不走寻常路，为项目创建完全自定义的动画。
有时您不想使用 CSS 随附的缓动关键字，或者要使用 Web Animations 或 JavaScript 框架。在这些情况下，一般可以定义自己的曲线（或公式），这让您能更好地控制项目动画的感觉。
摘要
- 自定义缓动可让您为项目提供更多个性。
- 您可以创建与默认动画曲线（缓出、缓入等）相似的三次贝塞尔曲线，只是重点放在不同的地方。
- 如果您需要对动画时间和行为（例如弹性或弹跳动画）进行更多控制，请使用 JavaScript。
如果您使用 CSS 编写动画，您会发现可以通过定义三次贝塞尔曲线来定义时间。事实上，关键字 ease、ease-in、ease-out 和 linear 映射到预定义的贝塞尔曲线，详细说明请参考 CSS 过渡规范和 Web Animations 规范。
这些贝塞尔曲线有四个值，即两对数字，每对数字描述三次贝塞尔曲线的控制点的 X 和 Y 坐标。贝塞尔曲线的起点坐标为 (0, 0)，终点的坐标为 (1, 1)；您需要设置两个控制点的 X 值和 Y 值。两个控制点的 X 值必须在 0 到 1 之间，每个控制点的 Y 值可以超过 [0, 1] 限制，但此规范未说明可超过多少。
更改每个控制点的 X 和 Y 值将实现截然不同的曲线，从而使动画有截然不同的感觉。例如，如果第一个控制点在右下角，则动画在开头缓慢。如果它在左上角，启动速度会非常快。相反，如果第二个控制点位于网格的右下角，则动画在结尾处变快；而在左上角时，动画将在结尾处变慢。
为了便于比较，下面提供了两条曲线：一条典型的缓入缓出曲线和一条自定义曲线：
此自定义曲线的 CSS 为：
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
前两个数字是第一个控制点的 X 和 Y 坐标，后两个数字是第二个控制点的 X 和 Y 坐标。
自定义曲线非常有趣，您可以有效控制动画的感觉。以上述曲线为例，您可以看到曲线与经典的缓入缓出曲线类似，但缓入（即“开始”）部分缩短，结尾的减速部分变长。
您可以使用此动画曲线工具进行实验，看看曲线对动画的感觉有何影响。
使用 JavaScript 框架实现更多控制
有时，您需要三次贝塞尔曲线未能提供的更多控制。如果您需要弹跳的感觉，不妨考虑使用 JavaScript 框架，因为使用 CSS 或 Web Animations 很难实现这个效果。
TweenMax
GreenSock 的 TweenMax（或 TweenLite，如果您希望非常轻量化）是一个强大的框架，因为您可以通过一个小型 JavaScript 库获得大量控制权，这是一个非常成熟的代码库。
要使用 TweenMax，请在页面中添加以下脚本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
脚本就位后，您可以针对元素调用 TweenMax，并告知它所需的属性和缓动。有多种加/减速选项可供您使用；以下代码使用一个弹性缓出：
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
TweenMax 文档重点介绍了此处提供的所有选项，因此非常值得一读。