Javascript 为什么这个动画不统一？

我有一个循环可以扩展和收缩，但是在10px-20px之间有一个小故障。仔细看，你会看到它“抽搐”

这就好像圆有一些分配的空间，然后“打破”了它

我试着在这里给它明确的空间：

---

但效果相同。

这是因为它是一个内联块元素，垂直对齐到底部，所以给它垂直对齐顶部解决问题，或者将其更改为块元素

使用CSS动画可以很容易地完成，这将提供更平滑的过渡（注意，IE 9和更早版本不支持CSS动画）

#计时器{
位置：相对位置；
显示：内联块；
宽度：0；
身高：0；
垂直对齐：顶部；
背景色：黑色；
边界半径：50%；
动画：缩放3s线性无限；
}
@关键帧缩放{
0%{宽度：0；高度：0；}
50%{宽度：32px；高度：32px；}
100%{宽度：0；高度：0；}
}

它发生在14px。因为它是内联块。更改为block，路径的更改就会消失。我不会为你接受我的答案而进行投票，所以我删除了我的答案，并对@LGSon的答案进行投票（无论如何这会更好）。@cadegalt0我们在这里不交换点，如果用户喜欢你的问题（和行为），他们可能会投票，答案也是如此。接受答案是为了让未来的用户知道您更喜欢哪种解决方案，因为在许多情况下，有多个答案与其他用户的需要相匹配。请注意，涉及CSS3动画的解决方案支持的浏览器更少。@LukeTaylor是的，尽管现在此解决方案的浏览器覆盖率为+90%。@非常正确。我想你的答案应该注意，它在较少的浏览器中受支持，以防海报需要支持旧的浏览器。@LukeTaylor因为所有主要的浏览器都支持它（+1版本），所以我们不写这个，否则我们需要在几乎所有的答案上都这样做。@LukeTaylor不，不是在这种情况下，我给出了脚本的解决方案，而且CSS是一种奖励。。。知道支持旧浏览器的用户通常都知道这一点，如果不知道，他们会在这里提问，为什么他们的动画在IE9中不起作用：）

$A.Class.create('test',{
    Name: 'Animator',
    E: {
        timer: '#timer'
    },
    init: function(){
        this.animate();
    },
    animate: function(){
        var s = this.E.timer.style;
        var step = 2;
        var state = 'up';
        $A.setInterval(function(){
            $A.log(step);
            s.height = s.width = step + 'px';
            s.borderRadius = step/2 + 'px';
            if(state === 'up') {
                step += 2;
            }
            if(state === 'down') {
                step -= 2;
            }
            if(step === 2) {
                state = 'up';
            }
            if(step === 42){
                state = 'down';
            }
        }, 200);
    } 
});

#timer{
  position: relative;
  top: 20px;
  left: 20px;
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: top;
  background-color: black;
  border-radius: 16px;
}