Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?-CSS-Tutorial-php.cn

Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?

Patricia Arquette

Freigeben： 2024-11-01 00:31:28

Original

886 Leute haben es durchsucht

How to Achieve Smooth Opacity Transitions While Abruptly Changing CSS Display?

Glatte Übergänge für CSS-Anzeige- und Deckkrafteigenschaften erstellen

Sie sind auf ein Problem gestoßen, bei dem Sie versuchen, die Anzeige und Deckkraft zu animieren Eigenschaften eines Elements, aber die Anzeigeänderung stört den Übergang. Um das gewünschte Ergebnis zu erzielen, bei dem die Deckkraft fließend übergeht, während sich die Anzeigeeigenschaft abrupt ändert, können Sie die folgende Lösung verwenden:

Michaels Antwort bietet einen umfassenden CSS-Code-Ansatz:

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

@-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;
    }
}</code>

Nach dem Login kopieren

Dies Code verwendet Keyframes, um die Deckkraft und Anzeigeeigenschaften separat zu animieren. Die Anzeigeeigenschaft ändert sich abrupt von „Keine“ auf „Blockieren“ bei 0 %, während die Deckkraft gemäß der angegebenen Beschleunigungsfunktion innerhalb von 0,5 Sekunden sanft von 0 auf 1 übergeht.

Das obige ist der detaillierte Inhalt vonWie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!