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

Question

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

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

这里有一个 < div> 和 < 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;
  }

Answer 1

CSS Transforms Module Level 1 - Terminology - Transformable Element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

存在一些跨浏览器的不一致，但是为了让 transform 属性对元素产生影响，display 属性不应该成为 inline.

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

Updated Example

#spinner {
  display: inline-block;
}

Answer 2

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

  }

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

CSS transform rotate animation does not work on anchor elements in Firefox

html

css

firefox

css-transforms