Transition of background-color

Question

I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

The #nav div is a menu ul list of items.

score 625 · Answer 1 · edited Dec 11 '22 at 08:17

625

As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.

This should produce a fade effect for you in these browsers:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.

This might come in handy, too: CSS Fundamentals: CSS 3 Transitions

ps.

As @gak comment below

You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link

edited Dec 11 '22 at 08:17

Nam G VU

33,193
69
233
372

answered Dec 10 '10 at 21:02

Ilium

6,471
1
15
11

42

You can also put in the transitions into `content #nav a` for fading back to the original when the user moves the mouse away from the link. – gak Oct 16 '12 at 04:10
3

Fiddle with **hover** and **click** transitions at: [jsfiddle.net/K5Qyx](http://jsfiddle.net/K5Qyx/) – Dem Pilafian Jan 01 '14 at 22:10
4

Wouldn't it be better to put the `transition:` into the non-hover? I think that each time the user hovers, the transition is compiled.. – Matej Aug 17 '14 at 19:25
for future users, vendor prefixes should not be used here – Claudiu Creanga Jul 22 '15 at 16:08
@Claudiu: I assume you mean "for future users who don't care about supporting legacy browsers"? Either way, vendor prefixes will always have place in the world, whether or not to use them is completely out of the scope of this answer. – Aug 05 '15 at 09:24
@ZaLiTHkA chrome under 26 and opera under 12 have virtually no users and including vendor prefixes now in this case should be discouraged as it makes the file bigger with no benefit. – Claudiu Creanga Aug 05 '15 at 18:32
2

CSS `transition` seemingly can't handle color of kind "linear-gradient" as can be tested [here](http://codepen.io/SitePoint/pen/uIemr). And btw, @Ilium's answer deserves to be marked as solution. – Stacky Oct 29 '15 at 10:50

score 115 · Answer 2 · edited Jan 11 '17 at 22:19

115

To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

edited Jan 11 '17 at 22:19

Veve

6,643
5
39
58

answered Jul 03 '15 at 08:46

Reza Mamun

5,991
1
43
42

10

It's not that it's better or worse. It's just that if you specify the transition on the lement itself, it will be animated when the element gets hovered and when it get "un-hovered". While if you apply it to the :hover, you will have an animation when the mouse enters, but not when it leaves. – LucasBeef Sep 24 '15 at 12:23
8

This solution is overall better. The transition effect would and should be expected to fade in on hover, and fade out on blur. – Chizzle Dec 13 '15 at 07:52

Gabriel Petersson · Answer 3 · 2022-02-07T19:54:13.723

Another way of accomplishing this is using animation which provides more control.

/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
@keyframes onHoverAnimation {
    0% {
        background-color: #FF0;  
    }
    100% {
        background-color: #AD310B;
    }
}

#content #nav a {
    background-color: #FF0;
    
    /* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
    animation-duration: 1s; /* same as transition duration */
    animation-timing-function: linear; /* kind of same as transition timing */
    animation-delay: 0ms; /* same as transition delay */
    animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
    animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
    animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
    animation-play-state: running; /* can be set dynamically to pause mid animation*/
    
    
}

#content #nav a:hover {
    /* animation wont run unless the element is given the name of the animation. This is set on hover */
    animation-name: onHoverAnimation;
}

score 0 · Answer 4 · answered Dec 11 '22 at 08:26

You can simply set transition to a tag styles and change background in hover

a {
    background-color: #FF0;
    transition: background-color 300ms linear;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
}

a:hover {
    background-color: #AD310B;
}

<a>Link</a>

Transition of background-color

4 Answers4

Linked

Related