Home >Web Front-end >CSS Tutorial >How to create a continuously rotating animation using pure CSS?
Endless Rotation Animation Using CSS
Request:
Rotate a loading icon indefinitely using 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:
The code provided doesn't initiate the rotation animation as expected.
Solution:
To achieve continuous rotation using CSS, we need to employ an animation. In this case, we use the @keyframes rule to define the animation and the animation CSS property to apply it.
Updated 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>
This updated code defines the rotating animation, which consists of a 360-degree rotation over a duration of 2 seconds. The infinite iteration count setting ensures that the animation repeats indefinitely.
The above is the detailed content of How to create a continuously rotating animation using pure CSS?. For more information, please follow other related articles on the PHP Chinese website!