Warum funktioniert meine Slide-Up-Animation mit CSS3 @keyframes nicht?

CSS3-Übergang – Fade-Out-Effekt

Mit CSS3 können Sie Fade-Out-Effekte einfach implementieren, um das Benutzererlebnis zu verbessern. Wenn Sie jedoch auf Probleme mit nicht funktionierenden Folienanimationen stoßen, untersuchen wir die Gründe dafür.

Verstehen des Problems

Sie versuchen, eine Slide-Up-Animation zu erstellen mit @keyframes. Die Animation findet jedoch nicht statt. Um dies zu debuggen, vertiefen wir uns in den von Ihnen bereitgestellten Code.

<code class="css">.dummy-wrap {
  animation: slideup 2s;
}</code>

Dieser Code gibt an, dass die .dummy-wrap-Klasse die Slideup-Animation 2 Sekunden lang ausführen soll. Der @keyframes-Block definiert die Bewegungen der Animation:

<code class="css">@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}</code>

Fehlerbehebung bei der Folienanimation

Bei der Überprüfung der Keyframes stellen wir fest, dass sich die Position des Elements nur in den letzten 25 ändert % der Animation. Da das Element oben beginnt: 0px; und endet oben: -20px;, es wird im Wesentlichen sofort nach oben verschoben: -20px;, was zu einem plötzlichen „Slide-Up“-Effekt führt.

Alternative Lösung für Ausblenden

Anstelle der Übersetzung können Sie auch die Deckkraft verwenden, um einen Ausblendeffekt zu erzielen. So können Sie es umsetzen:

<code class="css">.hidden {
  opacity: 0;
  transition: opacity 2s;
}</code>

Diese Technik verringert schrittweise die Deckkraft des Elements und erzeugt im Laufe von 2 Sekunden einen sichtbaren Ausblendeffekt.

Weitere Details

In der ersten Version Ihres Codes war der plötzliche „Slide-Up“-Effekt darauf zurückzuführen, dass die Position des Elements nur in den letzten 25 % der Animation geändert wurde. Durch den Wechsel zur Deckkraft und deren Übergang über die gesamte Dauer erzielen wir einen sanften Ausblendeffekt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Slide-Up-Animation mit CSS3 @keyframes nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!