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

Question

我不知道为什么，但我应用于 标记的转换在 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;
  }

最佳答案

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 属性不应该是 内联。

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

Updated Example

#spinner {
  display: inline-block;
}

关于html - CSS 变换旋转动画不适用于 Firefox 中的 anchor 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34473986/

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 属性不应该是 内联。

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

Updated Example

#spinner {
  display: inline-block;
}