我不知道为什么,但我应用于 标记的转换在 Firefox 中不起作用。在 chrome、opera、ie 和 safari 中运行良好。我在我的 WordPress 网站中使用它,如下所示
<a id="spinner" href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name');?></a>
这是一个
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"根据定义。
#spinner {
display: inline-block;
}
关于html - CSS 变换旋转动画不适用于 Firefox 中的 anchor 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34473986/