CSS3 动画不起作用

Question

我在我的应用程序中使用 IcoMoon App字体，用于符号。

在我的应用程序的某些部分，我喜欢通过使用 CSS3 动画选项来使用旋转箭头，但出于某种原因，这对我不起作用。

您可以在 FiddleJS 中看到我的实时代码

如你所见，在元素中

<i class="loading icon-progress rotate"></i>

我已经实现了所有合适的类，但是动画没有运行。有人可以帮助我吗？

我做错了什么吗？

注意:我还在我的 CSS 代码中尝试了以下内容

.rotate
{
    ....
}

还是没有结果

我安装的字体如下:http://i.icomoon.io/public/temp/9c89e0f9cb/BusinessDirectory/style.css

Answer 1

我看过你的 fiddle ，如果你在每个动画步骤中删除 top: 0px 和 left: 0px 属性，动画就会工作。

此链接解释了原因: Stackoverflow - Multiple properties in keyframe

我已经用百分比、em 和 rem 尝试过，你的关键帧中似乎不需要位置属性。

@keyframes rotationAnimation
{
  0%
  {
    transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-moz-keyframes rotationAnimation
{
  0%
  {
    -moz-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -moz-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-webkit-keyframes rotationAnimation
{
  0%
  {
    -webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-o-keyframes rotationAnimation
{
  0%
  {
    -o-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -o-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-ms-keyframes rotationAnimation
{
  0%
  {
    -ms-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -ms-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

上面的代码有效 - 如果您在其中一个关键帧中使用 margin-* 属性，那么有趣的是边距会被动画化而不是旋转。我没有足够的 CSS3 专业知识知道为什么:/

编辑:好的，我玩了一点 aaa，你需要将额外的属性写入 *-transform 中，比如

@-webkit-keyframes rotationAnimation
{
  0%
  {
    -webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0,top: 0;
  }
  100%
  {
    -webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0, top:0;
  }
}