你可能不知道的 Chrome 控制台：CSS3 动画的速度与激情

Question

速度

为了看 css3 过渡动画和帧动画效果，你是不是需要把时间改成很长：

div{
	transition: all 10s;
}

现在不需要啦，只要你打开 chrome 浏览器的控制台：

如上图，打开浏览器的控制台，点击图示按钮，拖动滑块即可。该动画速度将会影响 css3 中的过渡动画和帧动画。

1x 表示 1 倍速度，0.5x 表示 0.5 倍播放速度，如果你捣鼓过 VCD/DVD 播放器，那么你会对这个参数表示很好理解。

激情

此处激情指的是 easing 哦。

同时是 css3 动画，还需要不停的修改各种缓冲来看效果？

快快打开 chrome 浏览器控制台：

从图上可以看到，点击切换 easing 类型之后，css3 的 transition-timing-function也会跟着变化的哦，同时也会使用小球和轨迹，表示缓冲的简要过程，非常的方便直观。

chrome 默认支持的 easing 有：

• In Out Quadratic
• In-Out Cubic
• Fast Out, Slow In
• In Out Back
• ease-in-out
• In Out Sine