Wie erstelle ich mit reinem CSS eine kontinuierlich rotierende Animation?

Endlose Rotationsanimation mit CSS

Anfrage:

Drehen Sie ein Ladesymbol auf unbestimmte Zeit mit pure CSS.

Code:

<code class="css">#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}</code>

Problem:

Der bereitgestellte Code initiiert die Rotationsanimation nicht als erwartet.

Lösung:

Um eine kontinuierliche Rotation mit CSS zu erreichen, müssen wir eine Animation verwenden. In diesem Fall verwenden wir die @keyframes-Regel, um die Animation zu definieren, und die Animations-CSS-Eigenschaft, um sie anzuwenden.

Aktualisierter Code:

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

Dieser aktualisierte Code definiert die rotierende Animation, die aus einer 360-Grad-Rotation über eine Dauer von 2 Sekunden besteht. Die Einstellung „Unendliche Iterationsanzahl“ stellt sicher, dass die Animation auf unbestimmte Zeit wiederholt wird.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit reinem CSS eine kontinuierlich rotierende Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!