你可能不知道的 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
</>