Animando margini e riempimento con CSS Transition provoca animazione jumpy

Question

Nel mio personal website, sto utilizzando la proprietà Transizione CSS3 nella barra di navigazione in alto per animare i margini e il riempimento di un elemento con un bordo, per rendere il bordo di espansione al passaggio del mouse.

Rilevante markup:

<nav> 
     <a class="email" href="mailto:notmyrealemailaddress"> 
      <div class="icon-border"> 
      <img src="images/mail_icon.png" width="14" height="12"> 
      </div>Email Me</a> 

     <a class="phone" href="tel:4075555555"> 
      <div class="icon-border"> 
      <img src="images/phone_icon.png" width="11" height="18"> 
      </div>Call Me</a> 

     <a class="behance" href="http://behance.net/dannymcgee" target="_blank"> 
      <div class="icon-border"> 
      <img src="images/behance_icon.png" width="21" height="13"> 
      </div>See My Work</a> 
</nav> 

CSS:

header nav .icon-border { 
    display: inline-block; 
    border: 2px solid #000; 
    border-radius: 30px; 
    padding: 5px; 
    margin: 0 10px; 
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; 
} 

header nav a:hover .icon-border { 
    padding: 10px; 
    margin: -10px 5px; 
    border: 2px solid #ddd; 
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; 
} 

Vedere che cosa sta facendo? Riducendo i margini e aumentando l'imbottitura al passaggio del mouse, il bordo circolare diventa effettivamente più grande senza alterare la posizione dell'immagine in cui è avvolta.

funziona abbastanza bene, ma il problema è che se mi sposto rapidamente il mouse da E-MAIL ME di chiamare me e viceversa, prima della prima animazione completa, l'intera nav "salta" su e giù di circa un pixel. Tuttavia, questo problema non si verifica tra CALL ME e SEE MY WORK, il che mi porta a credere che sia un problema che può essere risolto. Qualche idea?

Answer 1

Credo che il problema è dovuto al fatto che si sta transitando i margini (e con margini negativi, che è sempre un po 'traballante).

Una soluzione più agevole potrebbe utilizzare transform: scale(x)

someting come:

header nav .icon-border { 
    display: inline-block; 
    border: 2px solid #000; 
    border-radius: 30px; 
    padding: 5px; 
    margin: 0 10px; 
    transform: scale(1); /* you need a scale here to allow it to transition in both directions */ 
    transition: 0.15s all ease; 
} 

header nav a:hover .icon-border { 
    transform: scale(1.2); 
    border: 2px solid #ddd; 
} 

Answer 2

Forse questo funziona:

header nav a { 
    display: inline-block; 
}