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

Ü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!