CSS 变换旋转动画不适用于 Firefox 中的锚元素答案

【问题标题】：CSS transform rotate animation does not work on anchor elements in FirefoxCSS 变换旋转动画不适用于 Firefox 中的锚元素
【发布时间】：2015-12-26 18:21:25
【问题描述】：

我不知道为什么，但我应用于标记的转换在 Firefox 中不起作用。在 chrome、opera、ie 和 safari 中运行良好。我在我的 wordpress 网站中使用它，就像这样

<a id="spinner" href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name');?></a>

这是一个

和的示例，它们在 firefox 以外的其他浏览器中运行良好。

http://jsfiddle.net/6HCRs/344/

这是我的代码

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

    #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

【问题讨论】：

标签： html css firefox css-transforms

【解决方案1】：

CSS Transforms Module Level 1 - Terminology - Transformable Element

可变形元素是属于以下类别之一的元素：

一个元素，其布局由 CSS 框模型控制，该模型是 block-level 或 atomic inline-level element，或者其 display property 计算为 table-row、table-row-group、table-header-group、table -footer-group、table-cell 或 table-caption

SVG 命名空间中的一个元素，不受具有属性 transform、“patternTransform”或 gradientTransform 的 CSS 框模型的约束。

存在一些跨浏览器不一致，但为了使 transform 属性对元素产生影响，display 属性不应为 inline。

锚元素默认为inline，因此您需要将display 更改为inline-block 或block 才能使其在Firefox 中工作。将display 属性的值更改为inline-block 会将元素呈现为atomic inline-level elements，因此根据定义，元素将变为"transformable"。

Updated Example

#spinner {
  display: inline-block;
}

【讨论】：

是的，在Transform + Animation/Transition 方面仍然存在很多浏览器不一致的地方。这是一种转换实际发生在内联元素上然后在 Chrome 中快速恢复的情况 - stackoverflow.com/questions/31768220/…。
@Harry 优秀——这看起来是一个非常深入的答案！我得通读一遍:)
谢谢 :) 我绝对推荐阅读参考文章。他们有很多关于实际页面渲染过程如何工作的信息。

【解决方案2】：

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -moz-animation-play-state: paused;

  }

【讨论】：