CSS3 旋转摆动答案

【问题标题】：CSS3 rotate wobblesCSS3 旋转摆动
【发布时间】：2019-02-16 13:12:48
【问题描述】：

我有以下代码，我正在尝试将图像旋转 360 度。但旋转摇摆不定。

.pully {
  position: absolute;
  right: 3.7em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

@-webkit-keyframes clockwiseSpinner {
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>
<img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt="">

JSFiddle

知道如何消除这种抖动吗？

【问题讨论】：

摇晃是什么意思？它会按预期旋转图像，外观的平滑度可能只会受到更圆润的图像的影响？
简单地说，图像本身是不稳定的，或者偏离中心。在图像编辑器中打开它并旋转它，看到了吗？我想比它高（1 像素）宽并没有帮助！
@enhzflep 我同意，这是图像，而不是代码。哦，应该补充一下，“infinite”在给定的代码中拼写错误......
@enhzflep 也不起作用。 rachel gallen 我不知道圆形图像是什么意思。
@null - 什么不起作用？我建议不采取任何行动。简而言之，如果不修改（我不会打扰），您拥有的图像不适合此目的

标签： css css-animations

【解决方案1】：

“这是图像”是对的，但并不完全正确。由于img 元素是默认的内联元素，它被赋予vertical-align: baseline 属性/值对，它在视觉上产生并带有一点 whitespace 或 "margin-bottom" 在它下面（给它一个边框时很容易看到，因为你已经完成），这当然是罪魁祸首并导致了摆动效果。

所以为了解决这个问题，只需将baseline 的 默认值 更改为例如top、middle 或 bottom，因为这些是要使用的“某些值”。

解决它的另一种方法是将其显示为block 级别元素，其中vertical-align 属性没有位置。

注意：如果您将这些更改应用于您的第一个示例或原始帖子，问题仍然存在，因此它确实是“图像的错误”。

.pully, .pully_left {
  border: 1px solid red;
  position: absolute;
  right: 3.8em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: 4;
  animation-duration: 1s;
  /* shorthand: "animation: clockwiseSpinner 1s ease-in 4;" */
}

.pully_left {right: 10.25em}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

.pully > img {vertical-align: bottom} /* or "top" / "middle" or "display: block" */

@-webkit-keyframes clockwiseSpinner {
  /*from {-webkit-transform: rotate(0deg)} unnecessary */
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>

<div class="pully">
  <img src="https://s8.postimg.cc/u6gyll9ud/p-pully-center.png" alt="">
</div>

<div class="pully_left"> <!-- for comparison -->
  <img src="https://s8.postimg.cc/u6gyll9ud/p-pully-center.png" alt="">
</div>

<!-- <img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt=""> -->

【讨论】：