Chrome DevTools：web animation 和 console_html/css_WEB-ITnose

本文是TTT 系列文章第五篇，今天要为大家介绍 4 种好玩的东西！

1. Cubic Bezier 可视化编辑器

在 CSS3 transition 中，你可以用 transition-timing-function 设置过渡的速度效果。transition-timing-function 提供了 5 个预定义的值：linear、ease、ease-in、ease-out 和 ease-in-out 。这些预定义效果其实都是 cubic-bezier 函数的不同参数时的效果，它们的对应关系如下：

图片内容来来自 w3school

贝塞尔曲线(Bezier curve)是计算机图形学中的一种重要的曲线参数，在 Adobe Illustrator 等矢量图编辑器中都会看到这种曲线，而在动画中它用于描述移动效果。它由 4 参数构成：

使用这 4 个参数你就可以自定义任何个性化的移动效果，但是这些参数并不直观。过去我们可以访问 CSS 专家 Lea Verou 做的这个网站 cubic-bezier.com ，在上面以可视化的形式找到自己想要的效果再把参数复制到自己的应用中。现在 Chrome 已经提供了这个功能，你可以直接在 DevTools 中可视化地编辑自己应用中的实际元素并实时预览实际的效果。

使用方法很简单，在元素审查(inspect)中找到你应用了 CSS transition 或 transition-timing-function 的元素，点击该元素 transition 样式前面的小方块就会弹出 Cubic Bezier 可视化编辑器了。动手试试吧！（可以在 cubic-bezier.com 页面找到 id 是 current 的元素动手尝试。）

2. web animation playback

除了上面的 Cubic Bezier 编辑器，Chrome 对 web animation 调试还有更多的支持。例如，我们打开这个 3D NES 控制器 的动画示例，通过元素检查(inspect)找到