将 CSS3 变换/动画与 font-face 一起使用会产生类似“摇摆不定”的微调器 gif

Posted 2023-03-06

【中文标题】将 CSS3 变换/动画与 font-face 一起使用会产生类似“摇摆不定”的微调器 gif

【英文标题】：Using CSS3 transforms/animations with font-face produces "wobbly" spinner gif-like

【发布时间】：2012-12-07 05:03:49

【问题描述】：

我正在使用带有 font-face (twitter bootstrap/font-awesome) 的 CSS 转换/动画来生成类似 gif 的微调器图标。

问题是图标围绕 360 度旋转时会摇晃。 See this JSFiddle 明白我的意思。有谁知道如何使它不摆动？或者至少让它旋转得更顺畅一点？

这是下面的代码：

CSS：

i.icon-repeat 
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;

@-o-keyframes Rotate 
  from -o-transform:rotate(0deg);
  to -o-transform:rotate(360deg);

@-moz-keyframes Rotate 
 from -moz-transform:rotate(0deg);
 to -moz-transform:rotate(360deg);

@-ms-keyframes Rotate 
  from -ms-transform:rotate(0deg);
  to -ms-transform:rotate(360deg);

@-webkit-keyframes Rotate 
  from -webkit-transform:rotate(0deg);
  to -webkit-transform:rotate(360deg);

@keyframes Rotate 
  from  transform:rotate(0deg);
  to  transform:rotate(360deg);

#iconRepeatMain
  display: inline-block;    
  position: absolute;
  z-index:10007;
  left: 50%;
  top: 50%;
  margin-left: -24px; /* -1 * image width / 2 */
  margin-top: -24px;  /* -1 * image height / 2 */
  font-size:36px;
​

html：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>​

注意：如果有人想在您自己的网络应用程序中使用此代码，请务必在完成所需操作后从 DOM 中删除此微调器。让这个图标在后台旋转会烧毁 CPU，无论您使用哪种浏览器，您都不会相信。此外，简单地切换其可见性，即display:none，也不起作用。您需要像这样从 DOM 中删除它：$('#iconRepeatMain').remove();

【问题讨论】：

太棒了。我什么都不会改变！

我认为问题在于字体本身并没有完全居中。最好使用图片代替。

@Blazemonger 哦，这很好。你能建议一个黑客来居中吗？

@Forty-Two 相信我，随着时间的推移，你会对它看起来摇摇晃晃的样子感到恼火。微调器应该传达成功的进展。这看起来就像一辆车轮即将脱落并要翻过悬崖的汽车。

我很感激不久前有人问过这个问题，但 JSFiddle 链接不再有效。

【参考方案1】：

尝试在元素上设置特定的高度和宽度。通过反复试验，我发现添加：

#iconRepeatMain 
    width: 26px;
    height: 19px;

字体居中很好，似乎消除了摆动。但是，这可能取决于所使用的浏览器——彻底测试。

http://jsfiddle.net/mblase75/pGhFX/13/

【讨论】：

再次更新。在 Chrome 中，26 x 19 像素完全消除了抖动。使用浏览器的网络检查器微调高度和宽度，直到看到自己喜欢的为止。

是的，width:25px; height:15px; 看起来很棒 :)

但是使用image会干净得多。

@Kosta 我不知道“更清洁”，但它肯定会更可靠。

“但是使用图像会更干净”-@Kosta 我认为你可能是对的。

【参考方案2】：

默认情况下，CSS 使用属性transform-origin 转换有关其垂直和水平中心的内容。此默认值的简写语法是 50% 50%，它表示原点的 x 和 y 值。

对于这个图标，我发现将 y 原点移动到 38% 会使其平滑一点，但您需要尝试使用它才能获得精确的值。 View on JSFiddle

i.icon-repeat 
  -webkit-transform-origin:50% 38%;
  -moz-transform-origin:50% 38%;
  -ms-transform-origin:50% 38%;
  -o-transform-origin:50% 38%;
  transform-origin: 50% 38%;

有关transform-origin 属性的更多信息，我推荐the MDN article on the property.

【讨论】：

+1 - 这是一个比我更好的解决方案，因为它以最直接的方式解决了真正的问题（居中）。顺便说一句，47% 41%works even better for me。

我找到的其他有助于解决抖动的方法是使用icon-refresh 而不是icon-repeat 并加快从500ms 到250ms 的旋转，如this JSFiddle 所示。与icon-repeat 相比，icon-refresh 箭头的对称性在图标旋转时似乎更具视觉吸引力。关于旋转速度，通常不会注意到微调器 b/c 页面加载速度如此之快。但是如果微调器很明显（页面正在做繁重的工作），我认为最好表明服务器正在“快速”=hard 而不是“slow”=“lazy”。

【参考方案3】：

我没有在 Font Awesome 网站的页面中看到它，但 CSS 源代码显示了一个图标旋转类，它可以无休止地旋转图标，并且对于您的图标重复徽标，几乎没有摆动。

<i class="icon-repeat icon-spin"></i>

...虽然我猜它真的是为 icon-spinner 图标准备的：

<i class="icon-spinner icon-spin"></i>

编辑：d'oh...这依赖于比您的示例中更新的 font-awesome.css 。所以也许答案只是他们自己修复了摆动。不过 icon-spin 类是新的。

【参考方案4】：

我如何解决图标字体偏离中心旋转的问题： 我必须解决几个问题： 1. 图标大小：它必须是整个像素大小（例如，字体大小：小；使我的图标为 17.5 像素，因此中心不是转换的绝对中心） 2.定义显示：图标级别的块使其正确居中在父div的中间 3. 定义父 div 的确切正方形大小（在我的例子中是按钮）和固定填充使其正确居中 4.添加任何文本阴影将改变内部图标的大小，使其不在中心。诀窍是在我的情况下将悬停样式更改为与背景颜色相同的阴影

代码如下：

CSS：

button.close 
padding: 10px;
opacity: 0.8;
text-shadow: 1px 1px 1px #999; 
width: 40px;
height: 40px;

button.close i
font-size: 20px;
max-width: 20px;
max-height: 20px;
display: block;

button.close:hover 
text-shadow: 1px 1px 1px #fff; 

/* rotation CSS*/
@keyframes anim-rotate 
0% 
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);

100% 
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);


@keyframes anim-rotate-next 
0% 
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);

100% 
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);


.rotate
animation: anim-rotate-next 1s normal linear;

.rotate.down
animation: anim-rotate 1s normal linear;

HTML：

<button type="button" class="close"><i class="lnr lnr-sync rotate"></i></button>

最后是用于切换旋转类的 JQuery jQuery：

$("#parentDiv").on('click', 'i.lnr-sync', function () 
// rotiraj ikonu
$(this).toggleClass("down");
);