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

User · Answer

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    x000D   x000D  a   x000D      background-color   FF0  x000D    x000D   x000D  a hover   x000D      background-color   AD310B  x000D      -webkit-transition  background-color 1000ms linear  x000D      -ms-transition  background-color 1000ms linear  x000D      transition  background-color 1000ms linear  x000D    x000D   lt a gt Navigation Link lt  a gt  x000D   x000D   x000D    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

User · Answer

To me  it is better to put the transition codes with the original minimum selectors than with the  hover or any other additional selectors    x000D   x000D   content  nav a   x000D      background-color   FF0  x000D       x000D      -webkit-transition  background-color 1000ms linear  x000D      -moz-transition  background-color 1000ms linear  x000D      -o-transition  background-color 1000ms linear  x000D      -ms-transition  background-color 1000ms linear  x000D      transition  background-color 1000ms linear  x000D    x000D   x000D   content  nav a hover   x000D      background-color   AD310B  x000D    x000D   lt div id  content  gt  x000D       lt div id  nav  gt  x000D           lt a href   link1  gt Link 1 lt  a gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another way of accomplishing this is using animation which provides more control   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  quot alternate quot  to run animation  then run it backwards        animation-fill-mode  none     can be used to retain keyframe styling after animation  with  quot forwards quot         animation-play-state  running     can be set dynamically to pause mid animation               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 hover          animation wont run unless the element is given the name of the animation  This is set on hover        animation-name  onHoverAnimation

[css] Transition of background-color

Examples related to css