Why Isn't My CSS3 Image Rotation Animation Working?

CSS3 Rotate Animation: Resolving CSS Issues for Image Rotation

CSS3 animations provide a powerful tool for creating dynamic and visually engaging web experiences. One common use case is rotating an image or element using the transform property. However, incorrect CSS can prevent the animation from functioning correctly.

An example of such an issue is provided, where an image is intended to rotate 360 degrees but remains static. The problem lies within the provided CSS.

The Correct CSS

To fix the issue, the following revised CSS has been created:

.image {<pre class="brush:php;toolbar:false">position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;

}
@-moz-keyframes spin {

100% { -moz-transform: rotate(360deg); } 

}
@-webkit-keyframes spin {

100% { -webkit-transform: rotate(360deg); } 

}
@keyframes spin {

100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
} 

}

The key difference lies in the margin property and the removal of the from and to states from the animation keyframes.

Explanation

The margin property correctly positions the image in the center of the page. The transform property, which applies the rotation, is set for all frames in the animation using the 100% state. By removing the from and to states, the animation becomes smoother, avoiding an abrupt transition at the beginning and end of the rotation.

With these changes implemented, the animated image should now rotate smoothly and continuously.

The above is the detailed content of Why Isn't My CSS3 Image Rotation Animation Working?. For more information, please follow other related articles on the PHP Chinese website!