title: Animating margins and padding with CSS Transition causes jumpy animation
body: <p>At my <a href="http://www.dannymcgee.net" rel="noreferrer">personal website</a>, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover.</p>
  
  <p>Relevant markup:</p>
  
  <pre><code>&lt;nav&gt;
          &lt;a class="email" href="mailto:notmyrealemailaddress"&gt;
            &lt;div class="icon-border"&gt;
              &lt;img src="images/mail_icon.png" width="14" height="12"&gt;
            &lt;/div&gt;Email Me&lt;/a&gt;
  
          &lt;a class="phone" href="tel:4075555555"&gt;
            &lt;div class="icon-border"&gt;
              &lt;img src="images/phone_icon.png" width="11" height="18"&gt;
            &lt;/div&gt;Call Me&lt;/a&gt;
  
          &lt;a class="behance" href="http://behance.net/dannymcgee" target="_blank"&gt;
            &lt;div class="icon-border"&gt;
              &lt;img src="images/behance_icon.png" width="21" height="13"&gt;
            &lt;/div&gt;See My Work&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>See what it's doing? By decreasing the margins and increasing the padding on hover, the circular border effectively gets bigger without altering the position of the image it's wrapped around.</p>
  
  <p>It works pretty well, but the problem is that if I quickly move the mouse from EMAIL ME to CALL ME and vice versa, before the first animation completes, the whole nav "jumps" up and down by about a pixel. However, this issue doesn't happen between CALL ME and SEE MY WORK, which leads me to believe it's an issue that can be fixed. Any ideas?</p>