Comment puis-je créer des transitions CSS fluides lors de la modification de l'affichage et de l'opacité ?

Création de transitions CSS fluides avec des changements d'affichage et d'opacité

Dans le monde du développement Web, la création d'interfaces utilisateur visuellement attrayantes et interactives est essentielle. Les animations CSS jouent un rôle essentiel pour y parvenir, nous permettant d'effectuer une transition transparente entre les différents états d'un élément.

Lorsque vous travaillez avec des animations CSS3, il n'est pas rare de rencontrer des situations dans lesquelles vous devez faire la transition entre plusieurs propriétés, telles que opacité et affichage. Cependant, la combinaison de ces propriétés peut être délicate, car la transition directe de la propriété display peut entraîner des changements brusques.

Considérez le code CSS suivant :

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Ce code vise à faire apparaître un élément avec la classe « enfant » en survol. Cependant, cela ne fonctionne pas correctement car la transition directe de la propriété d'affichage de « aucun » à « bloquer » crée une apparence abrupte.

Pour résoudre ce problème, nous pouvons exploiter les images clés CSS pour obtenir une transition en douceur entre les deux Etats. Le code suivant illustre cette approche :

.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;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Dans ce code, l'animation d'images clés 'fadeInFromNone' est utilisée pour faire passer l'opacité de 0 à 1 tout en définissant également la propriété d'affichage sur 'block' à 1 % pour évitez l'apparition brusque.

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!