为什么我的 CSS3 图像旋转动画不起作用？

CSS3 旋转动画：解决图像旋转的 CSS 问题

CSS3 动画提供了一个强大的工具，用于创建动态且具有视觉吸引力的 Web 体验。一种常见的用例是使用变换属性旋转图像或元素。但是，不正确的 CSS 可能会导致动画无法正常运行。

提供了此类问题的示例，其中图像旨在旋转 360 度但保持静态。问题出在提供的 CSS 中。

正确的 CSS

为了解决此问题，已创建以下修订版 CSS：

.image {

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); 
} 

}< /pre>

主要区别在于 margin 属性和删除动画关键帧的 from 和 to 状态。

说明

margin 属性正确地将图像定位在页面的中心。应用旋转的变换属性是使用 100% 状态为动画中的所有帧设置的。通过删除 from 和 to 状态，动画变得更加平滑，避免了旋转开始和结束时的突然过渡。

实施这些更改后，动画图像现在应该平滑且连续地旋转。

以上是为什么我的 CSS3 图像旋转动画不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！