How can I set a transition for an element losing focus

Question

I have a simple transition from black to dark grey like so:

.navbar .logo:hover {
    -o-transition: 1s;  
    -ms-transition: 1s;
    -moz-tranistion: 1s;
    -webkit-transition: 1s;
    transition: 0.2s;

    color: darkgrey;

}

Demo: http://jsfiddle.net/yD46F/10/

But when I stop hovering, it instantly turns back to black, instead of transitioning back to black, how can I fix this? Thanks!

Answer 1

Move your transitions to a separate CSS rule:

.navbar .logo {
    -o-transition: 1s;  
    -ms-transition: 1s;
    -moz-tranistion: 1s;
    -webkit-transition: 1s;
    transition: 0.2s;
}

The issue there is that you are currently assigning transitions to an element with pseudo-class :hover. So when the mouse moves from the element, it does not have :hover class anymore => does not have transition style properties.