twitter-bootstrap 使用带有 font-face 的 CSS3 转换/动画会产生类似“摇摆不定”的微调器 gif 的效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13959259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS3 transforms/animations with font-face produces "wobbly" spinner gif-like
提问by tim peterson
I'm using CSS transforms/animations with font-face (twitter bootstrap/font-awesome) to produce a spinner gif-like icon.
我正在使用带有 font-face ( twitter bootstrap/font-awesome) 的CSS 转换/动画来生成类似旋转 gif 的图标。
The problem is that the icon wobbles as it revolves around 360degrees. See this JSFiddleto see what I mean. Does anyone know how to make it notwobble? Or at least make it rotate a little more smoothly?
问题是图标在 360 度旋转时会摆动。请参阅此 JSFiddle以了解我的意思。有谁知道怎么让它不摇晃？或者至少让它旋转得更顺畅一些？
Here's the code for that below:
这是下面的代码：
CSS:
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:
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>?
Note:if anyone wants to use this code in your own web app, please be sure to remove this spinner from the DOM when the action it was needed for is done. Keeping this icon rotating in the background burns up CPU regardless of the browser like you won't believe. Also, simply toggling its visibility, i.e., display:none, doesn't work. You need to remove it from the DOM like with this: $('#iconRepeatMain').remove();
注意：如果有人想在您自己的 Web 应用程序中使用此代码，请确保在完成所需操作后从 DOM 中删除此微调器。无论浏览器如何，让这个图标在后台旋转都会消耗 CPU，就像您不会相信的那样。此外，简单地切换其可见性，即 ，display:none不起作用。您需要像这样从 DOM 中删除它：$('#iconRepeatMain').remove();
回答by jamesplease
By default, CSS transforms things about their vertical and horizontal center with the property transform-origin. A short-hand syntax for this default value is 50% 50%, which represents the x and then y value of the origin.
默认情况下，CSS 使用属性转换关于它们的垂直和水平中心的东西transform-origin。此默认值的简写语法是50% 50%，它表示原点的 x 和 y 值。
For this icon, I found that shifting the y origin to 38% smooths it out a bit, but you'll need to play around with it to get the precise values. View on JSFiddle
对于这个图标，我发现将 y 原点移动到 38% 会使其平滑一点，但您需要使用它来获得精确的值。在 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%;
}
For more on the transform-originproperty, I recommend the MDN article on the property.
有关该transform-origin属性的更多信息，我推荐有关该属性的 MDN 文章。
回答by Blazemonger
Try setting a specific height and width on the element. Through trial and error, I found that adding:
尝试在元素上设置特定的高度和宽度。通过反复试验，我发现添加：
#iconRepeatMain {
width: 26px;
height: 19px;
}
centers the font pretty well and seems to eliminate the wobbling. However, it's possible this is dependent on which browser is being used -- test it thoroughly.
字体很好地居中，似乎消除了摆动。但是，这可能取决于所使用的浏览器——彻底测试它。
回答by Luxocrates
I don't see it documented in the pages at Font Awesome's site, but the CSS source shows an icon-spin class which rotates an icon endlessly, and for your icon-repeat logo, has virtually no wobble.
我没有看到它记录在 Font Awesome 网站的页面中，但是 CSS 源显示了一个图标旋转类，它可以无休止地旋转图标，并且对于您的图标重复徽标，几乎没有摆动。
<i class="icon-repeat icon-spin"></i>
...though I'm guessing it's really intended for the icon-spinner icon:
...虽然我猜它真的是为图标微调图标设计的：
<i class="icon-spinner icon-spin"></i>
Edit: d'oh... this relies on a more recent font-awesome.css than the one in your example. So maybe the answer is just that they fixed the wobble themselves. The icon-spin class is new though.
编辑：d'oh ... 这依赖于比您的示例中的更新的 font-awesome.css。所以也许答案只是他们自己修复了摆动。不过 icon-spin 类是新的。
回答by Gorance
How I solved my issue with out-of-center rotation of icon font: There were several issues I had to resolve: 1. size of icon: it has to be whole px size (e.g. font-size:small; makes my icon 17.5px so center is not absolute center for transformation) 2. defining display: block on icon level makes it center correctly in the middle of the parent div 3. defining exact square size of parent div (in my case button) and fixed padding made it center correctly 4. adding any text-shadow will change the size of the inner icon so it will be out of the center. Trick is to change the hover style to be the same shadow with color same as background in my case
我如何解决图标字体偏离中心旋转的问题： 有几个问题我必须解决： 1. 图标的大小：它必须是整个 px 大小（例如 font-size:small；使我的图标 17.5 px 所以中心不是转换的绝对中心） 2. 定义显示：图标级别的块使其在父 div 的中间正确居中 3. 定义父 div 的精确正方形大小（在我的例子中是按钮）和固定填充使它正确居中 4. 添加任何文本阴影都会改变内部图标的大小，因此它将超出中心。在我的例子中，技巧是将悬停样式更改为颜色与背景相同的阴影
So here is the code:
所以这里是代码：
CSS:
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:
HTML：
<button type="button" class="close"><i class="lnr lnr-sync rotate"></i></button>
and finally JQuery for switching rotate class JQuery:
最后是用于切换旋转类 JQuery 的 JQuery：
$("#parentDiv").on('click', 'i.lnr-sync', function () {
// rotiraj ikonu
$(this).toggleClass("down");
});
