Animating Fields and Extras Using CSS Transition Causes Animated Animation

Question

On my personal website, I use the CSS3 Transition property on the top navigation bar to animate the fields and fill the element with a border to hover over.

Corresponding 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:[phone]"> <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; } 

See what he does? By reducing margins and increasing indentation when you hover, the circular frame effectively becomes larger without changing the position of the image that it is wrapped around.

This works very 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 is completed, the entire nav will “jump” up and down by about a pixel. However, this problem does not occur between CALL ME and SEE MY WORK, which makes me believe that the problem can be fixed. Any ideas?

Answer 1

I believe the problem is that you are switching to fields (and using negative fields that always win a little).

A smoother solution can use 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 #ddd; } 

Answer 2

Maybe this works:

 header nav a { display: inline-block; }