CSS Transitions: Edge Slides Instead of Fading

Question

I created a link so that when you hover over it, a border appears from above; and when you draw the border, it will disappear with the transition. The border slides, instead of fading out when you hover over it and turn it off. I want the border to fade instead of a slide. How can i do this? Here is jsfiddle

HTML

<div>Text</div> 

CSS

 div { line-height: 50px; width: 100px; text-align: center; cursor: pointer; transition: border .2s ease-in-out; -webkit-transition: border .2s ease-in-out; -moz-transition: border .2s ease-in-out; } div:hover { border-top: 3px solid #000; } html, body { margin: 0; padding: 0; } 

Answer 1

If you want to animate a color, animate the color, not the entire border. Now you also animate it from 0 to 3 pixels, so of course it slides. Instead, you should just give it a transparent default border.

 div { line-height: 50px; width: 100px; text-align: center; cursor: pointer; transition: border-color .5s ease-in-out; border-top: 3px solid transparent; } div:hover { border-top-color: #000; } 

JSfiddle example

As a side element: -moz-transition deprecated now, since FF17 or so Mozilla supports the CSS transition module without a prefix.

Dec 2014 update : since I noticed that this answer is still viewed and maintained often, note that transition no longer a prefix in any current or recently supplanted browsers .

Answer 2

In this case, you will also need to have a border. Make it transparent in the first state. Thus, it will not “grow” in place ... and the color will simply fade as it changes.

http://jsfiddle.net/kLnQL/11/

 div { border: 3px solid transparent; } div:hover { border: 3px solid #f06; }