Warum ist diese Animation nicht einheitlich?

Question

Ich habe einen Kreis, der sich ausdehnt und zusammenzieht, aber es gibt einen Fehler bei etwa 10px - 20px. Schau genau hin und du wirst es "zucken" sehen.

Es ist, als ob der Kreis etwas zugewiesenen Raum hat und dann "bricht" aus.

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

versucht, was ich ausdrücklich Raum hier:

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

aber die gleiche Wirkung.

Answer 1

Das ist, weil es ein Inline-Blockelement ist, das vertikal nach unten ausgerichtet ist, so dass es vertikal ausgerichtet wird, um das Problem zu lösen, oder zu einem Blockelement zu ändern.

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

Und es kann leicht CSS-Animation gemacht werden, das einen reibungsloseren Übergang geben wird (beachten Sie, dass CSS-Animationen sind nicht in IE 9 und früheren Versionen unterstützt)

#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>