Facilité de transition sur un objet qui apparaît en survol - css, css3, survol, transitions

J'essaie d'obtenir la facilité de transition nécessaire, mais je ne peux pas. C’est un peu plus délicat de savoir où placer le css de transition quand il vise quelque chose qui montre quelque chose en survol.

Le code est le suivant:

<div class="language-box">
<ul>
<li><a href="#" class="call-cs">English
<span class="cs">Coming Soon</span></a></li>
<li><a href="/">Svenska</a></li>
</ul>
</div>

Et css j’essaie c’est:

span.cs {
display: none;
}
a.call-cs:hover span.cs {
display: block;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

-webkit-transition: background 3s ease;
-moz-transition: background 3s ease;
-o-transition: background 3s ease;
transition: background 3s ease;
}

Réponses:

Vous ne pouvez pas utiliser la transition pour l’affichage, mais changer la taille de votre li et son opacité pour créer une transition sympa:

CSS

    span.cs {
opacity:0;
height:0;
}
a.call-cs:hover span.cs {
display: block;
height:18px;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
opacity:1;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

transition: all 0.5s ease;

}

li{
position:relative;

}

DEMO