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). Dies sorgt für einen reibungslosen Übergang.

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

2. Animation anwenden:

Wir wenden die erstellte Keyframe-Animation mit 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).

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3. Korrigieren Sie Browser-Kompatibilitätsprobleme:

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.

.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 */
}

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