Question

我有一张图片，然后我将以下样式规则应用于：

.spinner {
    position: absolute;
    width: 600px;
    height: 600px;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation:spin 14s linear infinite;
    animation:spin 14s linear infinite;
}
@-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}

在我的IDE中，这非常好用。然后我在6个月前向网上发布了一个页面。我加载了页面，它按预期工作。事实上，6个月内所有事情都很好，没有问题或任何事情。几个星期前，我注意到一个奇怪的发展 - 旋转行为发生了变化。我很困惑，因为这个页面，实际上，整个网站都是静态的。主css文件或任何可能干扰我上面发布的样式规则的任何内容都没有更新。

具体而言，改变的是代替在中心处旋转的图像，图像现在旋转约其原始中心位置。想象行为改变的最简单方法是将其与时钟进行比较。当手旋转时，时钟的中心不会移动。然而，分针和时针都做（即指针指向时间的指针的末端）。这就是我的形象现在正在做的事情。现在，当它不应该在像素空间中移动x和y维度时。它应该旋转到位，保持静止。 x或y应该没有移动。

我对自己说，＆＃34;这是不可能的，＆＃34;并且认为问题本身就会像它一样神秘地消失。不幸的是它持续了几个星期，所以我觉得有必要处理它。尽管没有样式规则冲突，但我将!important添加到我上面为.spinner类发布的所有样式规则以及@keyframes范围之外。这没有任何帮助。

现在我开始认为它可能是一个浏览器问题？我使用谷歌浏览器;只有谷歌浏览器，我没有包含任何-moz，我不需要。我唯一的猜测是浏览器自我更新并开始以不同的方式处理这些动画？

问题：为什么animation:spin会改变旋转行为？这是其他一些迫在眉睫的问题的症状吗？除了添加!important？
之外，我还能做些什么来使我的规则更加健壮

Chrome版本：64.0.3282.186

更新在看似十亿次试验和错误之后，我发现通过设置：

.spinner { -webkit-transform-origin: 15% 0%; }

图像像过去一样开始旋转到位。仍然在回答发生了什么......

我检查了图像，看它的尺寸是否有所改变，但事情看起来很正常。

Answer 1

2021.5 有点晚但可能对某些人有帮助。就我而言，这是因为我删除了：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

然后抓住了那个。以下所有内容均未改动，css为：

#overlay {
 display: none;
 align-items: center;
 justify-content: center;
 height: 100%;
 width: 100%;
 position: absolute;
 z-index: 99999;
}

.myblock {
 display: inline-block;
 vertical-align: center;
 horiz-align: center;
 -webkit-animation: spin 4s linear infinite;
 -moz-animation: spin 4s linear infinite;
 animation: spin 4s linear infinite;
 transform-origin: center center;
 -moz-transform-origin: center;
 width: auto;
 height: auto;
}

html：

<body>
<div id="overlay">
  <div class="myblock" style="background-color: transparent; background-blend-mode: unset">
    <img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
         alt="this slowpoke moves"/>
 </div>
</div>

....//other divs
 </div>
</body>

js部分：

function spinIt(gironPrm) {
    if (gironPrm === true)
        $("#overlay").css('display', 'flex')
    else
        $("#overlay").css('display', 'none')
}

我不知道不关心它的科学，也没有时间弄清楚为什么它会发生在我身上，但它就是这样

CSS动画旋转 - 不再旋转到位

1 个答案: