FED

©FrontEndDev.org
2015 - 2024
web@2.23.0 api@2.21.1

你可能不知道的 chrome 控制台:css3 动画的速度与激情

速度

为了看 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