Wie kann ich flüssige CSS-Verlaufsanimationen ohne abrupte Positionsänderungen erstellen?-CSS-Tutorial-php.cn

Wie kann ich flüssige CSS-Verlaufsanimationen ohne abrupte Positionsänderungen erstellen?

Mary-Kate Olsen

Freigeben： 2024-12-12 22:01:14

Original

481 Leute haben es durchsucht

How Can I Create Smooth CSS Gradient Animations Without Abrupt Position Changes?

Verläufe mit CSS animieren

Bestimmte Szenarien können Schwierigkeiten bei der Erstellung nahtloser Verlaufsanimationen bereiten. Ein bemerkenswertes Problem sind die abrupten Positionsänderungen während der Animation. Der bereitgestellte Code veranschaulicht dieses Problem:

.animated {
  animation: gra 5s infinite;
  animation-direction: reverse;
}

@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%);
  }
}

Nach dem Login kopieren

Lösung

Um dieses Problem zu beheben, können Sie die Hintergrundpositionseigenschaft von CSS in Verbindung mit Keyframes verwenden, um eine Glättung zu erstellen Animation. Betrachten Sie den folgenden Code:

#gradient
{
    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%}
}

Nach dem Login kopieren

In diesem Code:

Die Eigenschaft „Hintergrundgröße“ stellt die nahtlose Schleife des Farbverlaufs sicher.
Die Eigenschaft „Hintergrundposition“ steuert die Startposition des Farbverlaufs.
Die Keyframes animieren die Eigenschaft „Hintergrundposition“ und erzeugen so die Illusion eines Farbverlaufs Bewegung.

Das obige ist der detaillierte Inhalt vonWie kann ich flüssige CSS-Verlaufsanimationen ohne abrupte Positionsänderungen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!