Wie animiere ich CSS-Anzeige- und Deckkraftänderungen gleichzeitig?

Übergang von CSS-Anzeige- und Deckkrafteigenschaften

Der Versuch, CSS-Elemente sowohl mit Anzeige- als auch mit Deckkrafteigenschaften zu animieren, kann eine Herausforderung sein. Die Standard-CSS-Übergangseigenschaft erlaubt nur die Animation numerischer Werte und ist daher nicht mit Anzeigeänderungen kompatibel.

Eine Lösung liegt jedoch in der Nutzung der CSS-Keyframes-Animation. Durch die Erstellung einer benutzerdefinierten Keyframe-Animation können wir den Übergang von Anzeige- und Deckkrafteigenschaften gleichzeitig choreografieren.

Der bereitgestellte CSS-Code führt eine Keyframe-Animation mit dem Namen „fadeInFromNone“ ein. Zunächst wird die Anzeige auf „Keine“ und die Deckkraft auf 0 gesetzt, wodurch das Element effektiv ausgeblendet wird. Bei 1 % der Animation wird die Anzeige auf „Blockieren“ eingestellt, wodurch das Element sichtbar wird, während die Deckkraft auf 0 bleibt. Dadurch entsteht der Eindruck eines Elements, das aus der Transparenz ausgeblendet wird. Die Animation endet zu 100 %, wobei das Element vollständig sichtbar und undurchsichtig ist.

Um diese Animation zu verwenden, wenden Sie sie auf den Schwebezustand des übergeordneten Elements an. Hier ist der aktualisierte Code:

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

Mit dieser Lösung können Sie Anzeige- und Deckkrafteigenschaften nahtlos übergehen und so den gewünschten Animationseffekt erzielen.

Das obige ist der detaillierte Inhalt vonWie animiere ich CSS-Anzeige- und Deckkraftänderungen gleichzeitig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!