Animating margins and padding with CSS Transition causes jumpy animation

Question

At my personal website, 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 ho

Answer 1

Maybe this works:

header nav a {
  display: inline-block;
}

Answer 2

I believe the issue is because you are transitioning the margins (and using negative margins which is always a little wonky).

A smoother solution might be using transform: scale(x)

someting like:

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