Wie kann man die CSS-Eigenschaften „Anzeige' und „Deckkraft' beim Hover nahtlos übergehen?

Nahtloser Übergang von CSS-Anzeige- und Deckkrafteigenschaften

Im Bereich der CSS3-Animationen tritt ein Problem auf, wenn versucht wird, mehrere Eigenschaften, insbesondere Anzeige und Deckkraft, zu wechseln. Wie Sie hervorgehoben haben, wird der reibungslose Übergang der Deckkraft unterbrochen, wenn die Anzeigeeigenschaft während des Schwebens geändert wird.

Um dieses Dilemma zu lösen, wurde eine kreative Lösung entwickelt. Durch die Verwendung der @keyframes-Regel definieren wir im Wesentlichen eine benutzerdefinierte Animation, die das Erscheinungsbild des Anzeigeeigenschaftsübergangs nachahmt. Der Trick besteht darin, elegant von „display: none“ zu „display: block“ zu wechseln und gleichzeitig die Deckkraft des Elements zu steuern.

Der von Michael vorgestellte modifizierte CSS-Code dient als elegante Lösung:

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

In diesem Code definiert die @keyframes-Regel eine benannte Animation „fadeInFromNone“, die die Deckkraft des Elements von 0 auf 1 übergeht und gleichzeitig die Anzeigeeigenschaft von „none“ auf „blockieren“ setzt. Die Timing- und Easing-Funktion kann nach Wunsch angepasst werden.

Durch die Implementierung dieser Lösung können Sie sowohl die Anzeige- als auch die Deckkrafteigenschaften mühelos ändern und so einen sanften und optisch fesselnden Effekt beim Schweben gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann man die CSS-Eigenschaften „Anzeige' und „Deckkraft' beim Hover nahtlos übergehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!