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.

0

3 Answers

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

7

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> <div> <a href="#link1">Link 1</a> </div> </div>
2

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