Wie erstelle ich eine endlose CSS-Rotationsanimation für ein Symbol?

Endlose CSS-Rotationsanimation: So drehen Sie ein Symbol kontinuierlich

Um eine endlose Rotation eines Symbols mithilfe von CSS zu erreichen, einer Kombination aus CSS-Animationen und Keyframes erforderlich. Die folgenden Schritte skizzieren die Lösung:

1. Keyframes hinzufügen:

Wir definieren zwei Keyframes, einen für den Beginn der Drehung (0 Grad) und einen für das Ende (360 Grad). Dadurch ist ein reibungsloser Übergang gewährleistet.

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}</code>

2. Animation anwenden:

Wir wenden die erstellte Keyframe-Animation mithilfe der CSS-Animationseigenschaft auf das Element an, das wir drehen möchten. Diese Eigenschaft erfordert drei Parameter: den Keyframe-Namen, die Dauer und das Schleifenverhalten (unendlich).

<code class="html"><div class="rotating">
  Rotate
</div></code>

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

3. Korrigieren Sie Probleme mit der Browserkompatibilität:

Um die Kompatibilität zwischen verschiedenen Browsern sicherzustellen, fügen wir Herstellerpräfixe für WebKit-basierte Browser (Chrome, Safari) und Standardeigenschaften für andere Browser hinzu.

<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}</code>

Wenn Sie diese Schritte befolgen, können Sie mithilfe von CSS mühelos endlose Rotationsanimationen für Symbole und andere Elemente erstellen.

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