为什么我的 CSS3 旋转动画不起作用？-css教程-PHP中文网

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

DDD

发布： 2024-12-08 20:23:14

原创

849 人浏览过

Why Isn't My CSS3 Rotate Animation Working?

CSS3 旋转动画

在这篇文章中，我们将解决 CSS3 旋转动画未按预期工作的问题。用户想让图像无限旋转 360 度，但图像保持静止。

让我们检查提供的 CSS 来找出原因：

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

登录后复制

检查 CSS 后，我们'已经确定了一些需要调整才能使动画发挥作用的区域正确：

Float: 动画运行不需要 float: left 属性。删除它。
Position:position:absolute 属性导致图像定位不正确。将其更改为position:fixed。
Margin: margin-top 和 margin-left 属性用于使图像居中，但它们对于动画来说不是必需的。删除它们。
动画属性：动画属性似乎是正确的，除了关键帧本身。在 @keyframes 规则中，它缺少与 to 关键帧具有相同变换属性的 from 关键帧。

这是更正后的 CSS：

.image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;

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

登录后复制

通过这些调整，图像现在应该绕其中心平滑旋转。

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