带旋转的 Css3 动画答案

【问题标题】：Css3 Animation with rotate带旋转的 Css3 动画
【发布时间】：2022-02-19 01:01:46
【问题描述】：

我正在使用背景来旋转地球。但它在一些旋转后停止/颠簸。我不确定我在哪里犯了错误，以及为什么在一些旋转后它会抽搐。

这是带有小提琴的代码

HTML

  <div id="earth">
  </div>

CSS

body {
background-color: black;
}

#earth {
width: 143px;
height: 143px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 320px;
box-shadow: inset 1px 0 27px 1px rgb(5, 5, 5), inset -3px 0 5px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
margin-left: 52px;

}

@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

@-moz-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

小提琴：http://jsfiddle.net/k54QN/

【问题讨论】：

在 Firefox 中的 JSfiddle 上没有任何旋转，尽管确实显示了地球图像。
好！我从来不知道代码与 FFox 不兼容，但它在 GC 和 jerks 中有效！
有一天 CSS 会有常量。在我的内心深处，我知道！

标签： html css

【解决方案1】：

您的“收件人”background-position 应该等于图片的宽度。

【讨论】：

我使用了相同的宽度和 bg 大小但仍然相同！
我做了，问题在 IE11 和 FF26 上消失了。
太棒了！是的，这就是问题所在，宽度和 bg 大小不匹配，我将其匹配并修复了 :) 非常感谢

【解决方案2】：

为 43px 地球编辑：

像这样匹配background-size：

#earth {
width: 43px;
height: 43px;
background-size: 86px, 43px;  //Height should match height of globe (unless you don't want to see the poles) and width should be 2x height

@-webkit-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@-ms-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

@-moz-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

工作小提琴：

http://jsfiddle.net/k54QN/18/

【讨论】：

它可能只是有点滞后，因为它是一个巨大的图像 - 如果你继续观察几圈，你的电脑会变得更好，它会变得流畅。
不，图像不是问题，问题是宽度和 bg 大小不匹配。宽度 300 和 bg 大小 299 解决了这个问题。
这就是我的意思——查看更新的答案以获得更清晰的背景尺寸（1/16 比例）和匹配的宽度（需要加倍）
这很好用，但实际的宽度是 43 像素，高度是地球的 43 像素。那么如何设置 bg 大小以匹配这个比例呢？
43的实际宽度是多少？

【解决方案3】：

将此添加到#earth

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

它将使用 GPU 进行硬件加速。

【讨论】：

不！它还在抽搐，观察 3 或 4 秒，你会乖乖地看到它抽搐
好主意，但我认为问题只是由背景大小和翻译偏移之间的不匹配引起的。
你是对的！宽度 300px 和 bg 大小 299px 工作正常，问题解决了！

【解决方案4】：

@-webkit-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}


@-ms-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}

@-moz-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}


@keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}

尝试将 background-position-x 从“TO”更改，可能会出现问题的一件事是它会更快地旋转，但你只是延长了动画时间。

【讨论】：

590px 仍然跳动——你需要匹配背景图片的大小

【解决方案5】：

将背景位置更改为图像的宽度。

 body {
    background-color: black;
 }
    
 #earth {
    width: 243px;
    height: 243px;
    background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
    background-size: 620px;
    box-shadow: inset 1px 0 27px 1px rgb(5, 5, 5), inset -3px 0 5px 2px rgba(255, 255, 255, 0.2);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotate;
    -ms-animation-duration: 4s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 9999;
    position: relative;
    margin-left: 52px;
 }
    
 @-webkit-keyframes rotate {
   from { background-position: 0px 0px; }
   to { background-position: 620px 0px; }
 }
    
    
 @-ms-keyframes rotate {
   from { background-position: 0px 0px; }
   to { background-position: 620px 0px; }
 }
    
 @-moz-keyframes rotate {
   from { background-position: 0px 0px; }
   to { background-position: 620px 0px; }
 }
    
    
 @keyframes rotate {
   from { background-position: 0px 0px; }
   to { background-position: 620px 0px; }
 }

【讨论】：