如何调试CSS动画

96
九彩拼盘
0.4 2015.08.29 09:47* 字数 313

我们在做某个复杂的动画,或者多个元素同时做动画时,我们需要查看动画在某些时间点的元素的状态。此时动画应该是暂停的,这样方便我们进行查看。

因此,要方便调试,我们要做的是

  1. 让动画停下来
  2. 让动画处于我们要调试的时间点

为了达到上面的目的,我们要对需要调试的动画元素样式做如下的设置:

  1. 让动画停下来:animation-play-state: paused;
  2. 让动画处于我们要调试的时间点 : animation-delay: -调试时间;animation-delay的值,如果是正值,表示过指定时间后再开始动画。而如果是负值,动画会预先运动指定时间,这正是我们想要~

完整来写

.debug-anim {
    animation-play-state: paused !important;
    animation-delay: -3s !important;/* 这里假定是要调试动画在3s时的状态 */
}

最后,只需给需要调试的元素加上类名debug-anim即可。

Happy Coding~

参考

猜你喜欢


本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

🐋 Web 前端
Web note ad 1