Wie kann ich beim Ändern von Anzeige und Deckkraft sanfte CSS-Übergänge erstellen?

Erstellen reibungsloser CSS-Übergänge mit Anzeige- und Deckkraftänderungen

In der Welt der Webentwicklung ist die Erstellung optisch ansprechender und interaktiver Benutzeroberflächen von entscheidender Bedeutung. CSS-Animationen spielen dabei eine entscheidende Rolle, da sie uns einen nahtlosen Übergang zwischen verschiedenen Zuständen eines Elements ermöglichen.

Bei der Arbeit mit CSS3-Animationen kommt es nicht selten vor, dass Sie auf Situationen stoßen, in denen Sie mehrere Eigenschaften übergehen müssen, z Deckkraft und Anzeige. Das Kombinieren dieser Eigenschaften kann jedoch schwierig sein, da der direkte Übergang der Anzeigeeigenschaft zu abrupten Änderungen führen kann.

Beachten Sie den folgenden CSS-Code:

.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 zielt darauf ab, ein Element mit einzublenden die „Kind“-Klasse beim Schweben. Es funktioniert jedoch nicht richtig, da der direkte Übergang der Anzeigeeigenschaft von „none“ zu „block“ zu einem abrupten Erscheinungsbild führt.

Um dieses Problem zu beheben, können wir CSS-Keyframes nutzen, um einen reibungslosen Übergang zwischen zu erreichen die beiden Staaten. Der folgende Code demonstriert diesen Ansatz:

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

In diesem Code wird die Keyframe-Animation „fadeInFromNone“ verwendet, um die Deckkraft von 0 auf 1 zu ändern und gleichzeitig die Anzeigeeigenschaft bei 1 % auf „blockieren“ zu setzen Vermeiden Sie das abrupte Erscheinen.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Ändern von Anzeige und Deckkraft sanfte CSS-Übergänge erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!