Transformaciones después de un display block.

[Rafael]

A ver si me pueden ayudar. Estoy jugando con transformaciones que arranquen después de aparecer un objeto al pasar encima de un link.

Código HTML:

<style>
.aparece {
    background: transparent;
    width: 500px;
    height: 500px;    
/*    display: none; */
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
transition-delay: .5s;}
 
a:hover div.aparece {
    background-color: Red;
    display: block;
    opacity: .8;}
 
</style>
 
<a href="#">Aparece <div class="aparece">Aqui estoy</div></a>
 

Al pasar el mouse encima del texto Aparece, la opacidad cambia.

Pero el problema es que de inicio lo necesito con display: none (quitar el comentario) y entonces no funciona el efecto transición.


¿Alguna idea?