Heim >Web-Frontend >CSS-Tutorial >Wie können Anzeige- und Deckkrafteigenschaften in CSS-Animationen reibungslos übergehen?

Wie können Anzeige- und Deckkrafteigenschaften in CSS-Animationen reibungslos übergehen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 16:37:31666Durchsuche

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

Übergang von CSS-Anzeige- und Deckkrafteigenschaften

In CSS-Animationen kann es schwierig sein, gleichzeitig sowohl Anzeige- als auch Deckkrafteigenschaften zu wechseln. Dies wird deutlich, wenn versucht wird, ein Element durch Ändern seiner Anzeige- und Deckkraftwerte beim Schweben anzuzeigen, wie im folgenden Codeausschnitt zu sehen ist:

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

Dieser Code schlägt beim Übergang der Anzeigeeigenschaft fehl, was zu einem abrupten Übergang führt Aussehen des Elements. Um einen reibungslosen Übergang für beide Eigenschaften zu erreichen, wird die folgende Technik empfohlen:

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

Dieser Ansatz verwendet eine CSS-Animation, fadeInFromNone, um den Übergang beider Eigenschaften zu steuern. Die Animation beginnt mit ausgeblendetem und vollständig transparentem Element (Anzeige: keine; Deckkraft: 0). Anschließend wird das Element kurz sichtbar gemacht, seine Transparenz bleibt jedoch erhalten (Anzeige: Block; Deckkraft: 0), um den Anzeigeübergang auszulösen. Schließlich wird das Element vollständig sichtbar und undurchsichtig (Anzeige: Block; Deckkraft: 1). Die Übergänge für Anzeige und Deckkraft können durch Anpassen der Timing- und Beschleunigungsfunktionen in den Animationsregeln angepasst werden.

Das obige ist der detaillierte Inhalt vonWie können Anzeige- und Deckkrafteigenschaften in CSS-Animationen reibungslos übergehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn