Wie erstelle ich eine endlose CSS-Rotationsanimation?

Endlose CSS-Rotationsanimation implementieren

Problem:

Ziel ist es, ein Ladesymbol mithilfe von CSS, dem bereitgestellten Code, kontinuierlich zu drehen erzeugt nicht die gewünschte Animation. Wie kann man diese Rotation mithilfe von CSS effektiv erreichen?

Lösung:

Um eine endlose Rotation mithilfe von CSS zu erreichen, führen Sie die folgenden Schritte aus:

1. CSS-Animations-Keyframes hinzufügen:

   • Rotierende Keyframes in der @keyframes-Notation definieren.
   • Von- und Bis-Zustände für die Rotationstransformation festlegen.

2. Animation auf Zielelement anwenden:

   • Erstellen Sie eine rotierende Klasse in Ihrem CSS.
   • Wenden Sie die Animation an zum gewünschten Element mithilfe von Animationsname, Animationsdauer und Animationsiterationsanzahl.

3. Anbieterpräfixe einbeziehen:

   • Fügen Sie -webkit-, -moz- usw. Präfixe für browserübergreifende Kompatibilität hinzu.

Beispielcode:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>

Dieser überarbeitete Code gewährleistet eine kontinuierliche Rotation des Elements mit endlosen Iterationen und löst das Problem, das beim vorherigen Versuch aufgetreten war.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine endlose CSS-Rotationsanimation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!