Animation 动画调试

我们在工作中,会遇到一些网站实现各种动画效果,感兴趣的同学会停下脚步,思考这个动画的实现方案,那么遇到复杂的动画,我们可以利用浏览器自带的 Animation动画调试工具,来复现动画的运行过程

一、首先 F12 打开控制台,点击右边三个点,找到里面的 More Tools,然后点击Animations 工具

Animation 动画调试_第1张图片

二、执行动画后,进行动画分组

这里,我们可以看到动画分组,鼠标移入可以看到动画重复执行的过程

Animation 动画调试_第2张图片

这里我们可以看到动画的各个分组,然后点击某个组动画,可以看到动画的延迟时间,执行时间,动画名称等,而且可以暂停播放,修改播放时长,延迟时长等配置,点击左边的盒子可以跳转到执行动画的元素,并且看到动画的执行代码

Animation 动画调试_第3张图片Animation 动画调试_第4张图片
以上就是动画调试过程

你可能感兴趣的:(浏览器,Html,/,CSS,调试小技巧,动画)