Fade out but not fade in

Question

How do I use CSS3 to fade out but not in. I.E. when I apply a class to an element I want the background to change color immediately with no delay or transition, and when I remove it I want the background to fade out according to a transition. I know it should be simple but i haven't managed to figure it out yet.

Answer 1

Specify the transition times for the element with and without the class.

.el {
    background: red;
    -webkit-transition: background .5s;
}
.el.hover {
    background: blue;
    -webkit-transition: 0;
}​