このアニメーションが一様でないのはなぜですか？

Question

私は拡大したり収縮するサークルを持っていますが、約10px〜20pxのグリッチがあります。慎重に見て、あなたはそれが "つまよう"と見るでしょう。

円の中にいくつかの空白があり、そこから「外れる」ようなものです。

https://jsfiddle.net/nj2u9bhy/4/

$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); 
    } 
}); 

私はここで明示的にそれにスペースを与えてみました：

https://jsfiddle.net/nj2u9bhy/5/

も同様の効果を。

Answer 1

これは、縦に垂直に整列するインラインブロック要素であるため、問題を解決するか、ブロック要素に変更することです。

Updated fiddle

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

そしてそれは容易に滑らかな遷移を与えるCSSアニメーション（すなわちCSSアニメーションは、IE 9に支持され、以前されていない注意）

#timer{ 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    vertical-align: top; 
 
    background-color: black; 
 
    border-radius: 50%; 
 
    animation: zoom 3s linear infinite; 
 
} 
 
@keyframes zoom { 
 
    0% {width: 0; height: 0;} 
 
    50% {width: 32px; height: 32px;} 
 
    100% {width: 0; height: 0;} 
 
}

<div id="timer"> 
 
</div>

を用いて行うことができます