How can I set a transition for an element losing focus

css

Solution

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.

Problem

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!

Original source