Comment effectuer une transition en douceur des propriétés d'affichage et d'opacité dans les animations CSS ?-tutoriel CSS-php.cn

Comment effectuer une transition en douceur des propriétés d'affichage et d'opacité dans les animations CSS ?

Barbara Streisand

Libérer： 2024-11-02 16:37:31

original

701 Les gens l'ont consulté

How to smoothly transition both display and opacity properties in CSS animations?

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

Dans les animations CSS, il peut être difficile de faire la transition simultanément des propriétés d'affichage et d'opacité. Cela devient évident lorsque vous tentez de faire apparaître un élément en modifiant ses valeurs d'affichage et d'opacité au survol, comme le montre l'extrait de code donné :

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

Copier après la connexion

Ce code ne parvient pas à faire la transition de la propriété d'affichage, ce qui entraîne un brusque l'apparence de l'élément. Pour obtenir une transition en douceur pour les deux propriétés, la technique suivante est recommandée :

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

Copier après la connexion

Cette approche utilise une animation CSS, fadeInFromNone, pour contrôler la transition des deux propriétés. L'animation commence avec l'élément masqué et entièrement transparent (affichage : aucun ; opacité : 0). Il rend ensuite brièvement l'élément visible mais conserve sa transparence (affichage : bloc ; opacité :0) pour déclencher la transition d'affichage. Finalement, l'élément devient entièrement visible et opaque (affichage : bloc ; opacité : 1). Les transitions d'affichage et d'opacité peuvent être personnalisées en ajustant les fonctions de timing et d'assouplissement dans les règles d'animation.

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!