Wie erreicht man glatte Verlaufsanimationen in CSS?

Implementieren einer glatten Verlaufsanimation mit CSS

Frage: Unnatürliche Verlaufsanimation

Im Bereich der CSS-Verläufe gibt es eine uralte Herausforderung, die plagt viele Entwickler – die ruckartige, abrupte Bewegung von Farbverläufen während der Animation. Dieser störende Effekt entsteht, wenn der Farbverlauf bei jedem Animationsschritt abrupt seine Position ändert.

Betrachten Sie das folgende Beispiel:

@keyframes gra {
  0% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
  }
  50% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
  }
  100% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
  }
}

In diesem Code verschiebt sich die Position des Farbverlaufs plötzlich zwischen den drei Bildern. was zu einer ruckartigen Animation führt. Ziel ist es, einen nahtlosen und sanften Übergang zu erreichen, der den natürlichen Fluss des Farbverlaufs widerspiegelt.

Antwort: Beherrschung der Verlaufsanimation

Um das Geheimnis der sanften Verlaufsanimation zu lüften, führen wir einen anderen Ansatz ein . Anstatt die Position des Farbverlaufs direkt zu ändern, verschieben wir seine Größe. Diese subtile Änderung führt zu einer bemerkenswerten Verbesserung der Fließfähigkeit der Animation:

#gradient {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
  background-size: 200% 200%;

  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

In diesem verbesserten Code manipulieren wir jetzt die Eigenschaft „Hintergrundgröße“. Die Animation beginnt mit einer kleinen Verlaufsgröße und erhöht diese schrittweise, bis der Verlauf das gesamte Element abdeckt. Dadurch entsteht ein Effekt, bei dem die Farben nahtlos über das Element zu fließen scheinen.

Durch den Einsatz dieser Technik haben wir eine anmutige und fesselnde Farbverlaufsanimation erreicht, die Ihren Designs mit einem Hauch von Eleganz und Bewegung Leben einhaucht.

Das obige ist der detaillierte Inhalt vonWie erreicht man glatte Verlaufsanimationen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!