Question

Can anyone let me know why my element will not fade in?

The background image properly animates, but the .home class just appears rather than fading in?

Thanks, code snippet is below.

#home {
                                width:35px;
                                height:35px;
                                float:left;
                                margin:20px 20px 0 20px;
                                transition:background-position .2s ease;
                                -webkit-transition: background-position .2s ease;
                                -moz-transition: background-position .2s ease;
                                background-image:url('images/icons.png');
                        }
#home > .home {
                                position:absolute;
                                display:none;
                                margin-top:40px;
                                opacity:0;
                                transition:opacity 3s linear;
                        }
                        #home:hover > .home {
                                display:block;
                                opacity:1;
                        }
                        #home:hover {
                                background-position:0px 35px;
                        }

<!-- END STYLE START HTML -->
<div id="home"><div class="home">HOME</div></div>

Answer 1

Add transition on hover as well.

#home:hover > .home {
    display:block;
    opacity:1;
    transition:opacity 3s linear;
}

For cross-browsing transition add:

-moz-transition ...
-webkit-transition ...
-o-transition ...

-ms- is not supported.