Mise en page animée, Nouveautés de CSS

[Anard]

Bonjour à tous. Je viens vous voir pour un assistance cosmétique (et non pas cosmique).

Je suis en train de me remettre un peu au développement web. Depuis le temps que je n'y était pas venu, ça a bien bougé ! On peut maintenant faire des animations en CSS
Du coup pour mon nouveau site, je voudrais créer une interface adaptative et animée sans utiliser de javascript.

J'ai un menu principal "à la con" avec des chapitres principaux répartis autour d'une image. Le survol d'un chapitre doit faire apparaître un sous menu dans un genre de bulle, si possible de manière animée.
J'ai réussi à mettre en place quelques animations sur la couleur des liens, c'est déjà formidable.
Mais je n'arrive pas à faire apparaître ma box de manière progressive.

La construction du menu repose sur cette syntaxe :

Code

<dl><!-- élément de menu -->
    <dt><!-- titre du menu toujours visible, mais mobile-->
    <dd><ul><!-- sous-menu invisible au départ et qui doit apparaitre -->
        <li><!-- les différentes lignes du sous-menu -->

Pour faire apparaitre un <dd>, j'utilise dans mon css :

Code

dl:hover dd {
    display: inline-block;
}

Malheureusement, je n'arrive pas à animer cette appartition, même en indiquant au préalable

Code

dl dd {
    transition: display 1s;
}

En effet, il semble que la transistion doit s'appliquer à l'élément survolé et non à un sous-élément (en l'occurrence, je veux afficher le <dd> au survol du <dl> parent).
Je ne sais pas si je me fais bien comprendre...

Je découvres ces nouvelles fonctionnalités, alors votre aide serait la bienvenue...

Merci beaucoup. Pour plus d'informations, vous pouvez visualiser l'état des choses ici

[Anard]

Merci pour ta réponse.

Donc en effet, j'ai réussi à faire une apparition progressive avec opacity (voir site mis à jour.

Pour ceci, j'utilise donc ce CSS

Code

.menu dd {
    display: none;
    opacity: 0;
}
.corps dd {
    transition: opacity 2s ease;
}
.corps dd:hover {
    opacity: 1;
}
.corps .menu dl:hover dd {
    display: inline-block;
}

Le problème est toujours présent : ainsi, au passage sur une balise dl, la balise dd s'affiche (avec une opacité nulle), mais je n'arrive pas à créer la transition à ce moment. La seule solution que j'ai trouvée, c'est de faire la transitiuon au passage sur la balise dd directement, mais ce n'est pas très naturel.

Aurais-tu une idée de la bonne syntaxe ?

Ce message a été modifié par Anard - 23 Jan 2019, 16:24.