Comment animer simultanément les changements d'affichage et d'opacité CSS ?

Transition des propriétés d'affichage et d'opacité CSS

Lorsque vous essayez d'animer des éléments CSS en utilisant à la fois les propriétés d'affichage et d'opacité, cela peut être difficile. La propriété de transition CSS standard permet uniquement l'animation de valeurs numériques, ce qui la rend incompatible avec les changements d'affichage.

Cependant, une solution réside dans l'exploitation de l'animation des images clés CSS. En créant une animation d'images clés personnalisée, nous pouvons chorégraphier simultanément la transition des propriétés d'affichage et d'opacité.

Le code CSS fourni introduit une animation d'images clés nommée "fadeInFromNone". Cela commence par définir l’affichage sur aucun et l’opacité sur 0, masquant ainsi l’élément. A 1% de l'animation, l'affichage est réglé pour bloquer, rendant l'élément visible, tandis que l'opacité reste à 0. Cela crée l'apparence d'un élément sortant de la transparence. L'animation se termine à 100 %, avec l'élément entièrement visible et opaque.

Pour utiliser cette animation, appliquez-la à l'état de survol de l'élément parent. Voici le code mis à jour :

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}</code>

Cette solution vous permet de faire une transition transparente des propriétés d'affichage et d'opacité, obtenant ainsi l'effet d'animation souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!