How to Create an Endless CSS Rotation Animation?

Implement Endless CSS Rotation Animation

Problem:

Aspiring to rotate a loading icon continuously using CSS, the provided code fails to produce the desired animation. How can one effectively accomplish this rotation using CSS?

Solution:

To achieve endless rotation using CSS, employ the following steps:

1. Add CSS Animation Keyframes:

   • Define Rotating keyframes in @keyframes notation.
   • Set from and to states for rotation transformation.

2. Apply Animation to Target Element:

   • Create a rotating class in your CSS.
   • Apply the animation to the desired element using animation-name, animation-duration, and animation-iteration-count.

3. Include Vendor Prefixes:

   • Add -webkit-, -moz-, etc. prefixes for cross-browser compatibility.

Example Code:

<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>

This revised code ensures continuous rotation of the element with endless iterations, resolving the issue faced with the previous attempt.

The above is the detailed content of How to Create an Endless CSS Rotation Animation?. For more information, please follow other related articles on the PHP Chinese website!