Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Transitions: Border Slides Instead of Fading

I styled a link so that when you hover it, there will appear a border on the top; and when you hover off the border will disappear with a transition. The border slides in instead of fading in when you hover over it and off. I want the border to fade in instead of slide. How can I do this? Here is a 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;
}
like image 491
Moussa Harajli Avatar asked May 30 '13 23:05

Moussa Harajli


People also ask

How do you animate only borders in CSS?

The first thing is to create a border with a transparent background. Then animate it over hover giving it a linear animation and an identifier name as animate. Now using keyframes we will animate the border. Make sure to apply color to only the top and right side of the border.

How do you make a smooth transition in CSS?

Specify the Speed Curve of the Transition linear - specifies a transition effect with the same speed from start to end. ease-in - specifies a transition effect with a slow start. ease-out - specifies a transition effect with a slow end. ease-in-out - specifies a transition effect with a slow start and end.

Why is transition property not working?

The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.


2 Answers

If you want to animate the color, animate the color, not the entire border. You're now also animating it from 0 pixels to 3 pixels, so of course it slides in. You should just give it a default transparent border instead.

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

Sample on JSfiddle

As a sidenote: -moz-transition is obsolete nowadays, since FF17 or so Mozilla supports the CSS Transitions module without prefix.

Update dec 2014: as I noticed this answer is still being viewed and upvoted frequently, please note that transition is no longer prefixed in any current or recently superseded browsers.

like image 74
Niels Keurentjes Avatar answered Nov 15 '22 07:11

Niels Keurentjes


In this case - you are going to need to have a border to begin with as well. Make it transparent in the first state. This way it will not "grow" into place... and the color will just fade as it changes.

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

div {
  border: 3px solid transparent;
}

div:hover {
  border: 3px solid #f06;
}
like image 34
nouveau Avatar answered Nov 15 '22 09:11

nouveau