今天在制作首页导航图特效demo时，无意发现一个奇怪的交互现象，故记录
经测试，简化了触发该现象的代码，如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @keyframes move_top{ 0%{ top: 350px; } 100%{ top: 0; } } *{ margin: 0; padding: 0; } html{ /*去除滚动条*/ overflow: hidden; } div{ width: 100%; height: 100%; position: absolute; background: #000; z-index: -1; } a{ display: block; width: 100px; height: 100px; background: #acf; } #moveBox:target{ /*使用动画*/ animation: move_top 1s 1; } </style> </head> <body> <div id="moveBox"></div> <a href="#moveBox"></a> </body> </html>
在点击a标签后，moveBox并未如预期所想从距顶部350px位置到距顶部0px位置，而是a标签从屏幕上方进入屏幕。
去除html的overflow属性后，可发现当点击a标签时，页面出现一个滚动条，同时滚动条的可滚动长度在不断的缩小，同时a标签从上方进入可视区域。
把animation的循环次数从1改成大于1时，从第二次动画开始，动画效果符合预期。
修改moveBox的position属性的值为fixed可不触发该现象。