Mouseout background animation - CSS

Question

In this Fiddle (html+css) you can see that if you mouseover the "link" both, font and background, slowly rea-animates but if you mouseout ONLY the font re-animates again. The background just fast blink back to

   a {background:}

How do I force the background to animate even on mouseout?

Answer 1

You had your transition for the background only on the hover. That means that if the user isn't hovering the transition isn't executed. By giving #dolu a transition: 5s instead of transition: color 5s it is fixed.

updated fiddle

Full CSS:

body {background: red; }

#dolu {
    position: absolute; 
    bottom: 5px; text-align: 
        center; width: 100%; 
}

#dolu a:hover {
    color: white; 
    background: rgb(31, 31, 31); 

} 
#dolu a {
    color: black; 
    background: white; 
    font-size: 40px; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-variant: normal; 
    text-decoration: none; 
    padding: 10 20 6 20; 
    transition: 5s; 
}