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

我看过你的小提琴，如果你在每个动画步骤中删除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专业知道为什么：/

编辑：好的我已经玩了更多的aaaand你需要在* -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;
  }
}

CSS3动画不起作用

1 个答案: