How to make CSS3 { transition } to fade out?

[ilya Kraft]

Hello,

Straight to my question ))) I added :hover event to one of elements on my site and added css { transition } to it so it now changes text color on hover and has the fade in effect. But when I move mouse from that element I want it to fade out too. visit http://inelmo.com/noluck and hover over title and you will see that it fades in to grey color from red, but if you move mouse away it goes straight to red, how do I make it to fade out?

Here is css I have got so far.

.NoLuckText:hover {
    color:#666;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
 

[MusoFreak200]

well ilya Kraft.

unfortuneately IE does not support most if any transitions done by using css3 although you may create a close to it illusion.

try adapting this piece of code:

.NoLuckText {
color:#7F0000;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
}
.NoLuckText:hover {
color:#666;
-webkit-transition: all 500ms;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
 

hope that this helps!
dont forget to mark as solved answer if this does solve your problem