Question

我有一个关键帧微调器在y轴上旋转图像，在chrome中运行正常，但没有在firefox中运行。我已经尝试将html标签转换为div或span class / id，但没有任何效果。我有其他的关键帧实用程序在firefox中正常工作，只是这个没有。

我不确定是否应该将此作为一个单独的问题发布，但我有一个关键帧选框滚动文本，导致查看区域中的所有文本仅在firefox上模糊但在选取框滚动到视图外时消失，如果我删除字幕代码，文字再次正常。希望能得到一些帮助。对于微调器来说，css，html如下所示...... thx

css
@keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg); 
} }

.spinner { 
-webkit-animation-name: spinner;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 15;
-webkit-animation-duration: .8s;
-webkit-animation-delay: 4s;
-ms-animation-name: spinner;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: 15;
-ms-animation-duration: .8s;
-ms-animation-delay: 4s;
animation-name: spinner;
animation-timing-function: ease;
animation-iteration-count: 15;
animation-duration: .8s;
animation-delay: 4s;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

html snippet 
<table><tr>
<th>
<span class="spinner"><img src="https://copy.com/8hR4hdxIf2oO0T6x" width="106px" height="210px"></span>
</th>

Answer 1

<span>的默认显示类型为display: inline。 Firefox并不喜欢您尝试对内联元素进行三维转换。将display: block添加到您的.spinner。

还有一些更好的代码：

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg); 
  }
}

@keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg); 
  }
}

.spinner { 
  -webkit-animation-name: spinner; 
          animation-name: spinner;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: 15;
          animation-iteration-count: 15;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: block;
}

关键帧微调器不能在firefox＆amp;导致模糊文本

1 个答案: