How do I create an endless CSS rotation animation for an icon?

Endless CSS Rotation Animation: How to Rotate an Icon Continuously

To achieve endless rotation of an icon using CSS, a combination of CSS animations and keyframes is required. The following steps outline the solution:

1. Add Keyframes:

We define two keyframes, one for the start of the rotation (0 degrees) and one for the end (360 degrees). This ensures a smooth transition.

<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. Apply Animation:

We apply the created keyframe animation to the element we want to rotate using the CSS animation property. This property requires three parameters: the keyframe name, the duration, and the loop behavior (infinite).

<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. Correct Browser Compatibility Issues:

To ensure compatibility across different browsers, we include vendor prefixes for WebKit-based browsers (Chrome, Safari) and standard properties for other browsers.

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

By following these steps, you can effortlessly create endless rotation animations for icons and other elements using CSS.

The above is the detailed content of How do I create an endless CSS rotation animation for an icon?. For more information, please follow other related articles on the PHP Chinese website!