So you are trying to use some CSS3 markup to make a border appear in transition when you hover over your link or other element. But it just shows up instantly! This is something I have run into many times, and for some reason no one on the whole internet gives a clear explanation for it. Until today!
Why isn’t the transition working on the border?
I’ll tell you why! It’s because transitions do not CREATE new CSS properties, they merely TRANSITION them. Translation: you need to HAVE a border BEFORE the transition takes place. So instead of this:
|
1 2 3 4 5 6 7 8 9 10 11 |
a { color:purple; } a:hover { border-bottom:solid 1px pink; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } |
You need to put a border on the ‘a’ element before hover. I know what you are thinking, “But I don’t WANT a border on it before the hover state!” Well that’s too bad! Because you need one. But use your brain on this one. How can we hide it, to make it LOOK like there is no border? Simple! Match the original border color to the background color. So if our background is yellow, our new CSS should look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a { color:purple; border-bottom:solid 1px yellow; } a:hover { border-bottom:solid 1px pink; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } |
No one is the wiser. As far as everyone else is concerned, there WAS no border beforehand. There are probably plenty of other ways to hide the border as well, if you are dealing with opacity or anything else that might prevent color matching from working. You could probably try setting the line-height to greater than the height of the element, and using overflow:hidden, among many other creative methods.
Hope this helps someone out, since for some reason the internet has otherwise failed on this question.
2 Comments on “CSS3 Transition for Border Not Working”
Developers could also set the border color to transparent and then change the opacity on mouseover/hover. This would accomplish the request of not having a border visible at all-even if it is the same color as the background. A simple rgba(255,255,255,0) would work.
That’s a great idea! When I originally posted this I don’t think rgba was as widely supported as it is now, and I probably never even considered that. Thanks for the tip!