Question

我正在尝试旋转2张牌，一张图标和其他值我的haml片段是

.card
        .side.back
          %span.txt {{ notifications.length }}
        .side
          %i.material-icons.small_icon remove_red_eye

这在chrome / chromium和opera中运行得非常好，但在mozilla firefox中，眼睛图标与数据值一起出现。我的用于mozilla兼容性的CSS代码段是

.card{
-moz-animation-name: spin;
-moz-animation-duration: 2500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}

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

我该怎么做才能解决它？

.card .side {
  backface-visibility: hidden;
  border: none;
  background: #fafafa;
  border-radius: 0px;
  height: 100%;
  width: 100%;
}
.card .back {
  font-size: x-small!important;
  transform: rotateY(180deg);
}
.card {
  transform-style: preserve-3d;
  height: 100%;
  position: absolute;
  width: 100%;
  animation: spin 2500ms linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.small_icon {
  font-size: x-small!important;
}
.badge1 {
  position: absolute;
  top: 7px;
  left: 100px;
}

<div class="badge1">
  <div class="card-container badge1"></div>
  <div class="card">
    <div class="side back">
      <span class="txt">10</span>
    </div>
    <div class="side">
      <i class="material-icons small_icon">remove_red_eye</i>
    </div>
  </div>
</div>

Answer 1

你可以试试这个：

＆＃13;

.card{
-moz-animation-name: spin;
animation-duration: 2500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes spin{
        from { transform: rotateY(0deg); }
        to { transform: rotateY(360deg); }
    }

＆＃13;

          <div class="card">
            <div class="side back">
             <span>sdjfkdsjkfj</span>
            </div>
            <div class="side back">
             <i class="icon">hh</i>
            </div>
          </div>

＆＃13;

Answer 2

事实上，这里有一些非常奇怪的东西，遗憾的是我并不知道究竟是什么，也不知道其实施是否正确。

但Firefox不喜欢的是你的前面元素在动画之外没有自己的transform。

不知何故，这似乎使transform-style: preserve-3d丢失了。

所以有两个解决方法：

设置初始transform: rotateY(0);。

.card .side {
  backface-visibility: hidden;
  border: none;
  background: #fafafa;
  border-radius: 0px;
  height: 100%;
  width: 100%;
  /* makes FF happy */
  transform: rotateY(0deg);
}
.card .back {
  font-size: x-small!important;
  transform: rotateY(180deg);
}
.card {
  transform-style: preserve-3d;
  height: 100%;
  position: absolute;
  width: 100%;
  animation: spin 2500ms linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.small_icon {
  font-size: x-small!important;
}
.badge1 {
  position: absolute;
  top: 7px;
  left: 100px;
}

<div class="badge1">
  <div class="card-container badge1"></div>
  <div class="card">
    <div class="side back">
      <span class="txt">10</span>
    </div>
    <div class="side">
      <i class="material-icons small_icon">remove_red_eye</i>
    </div>
  </div>
</div>

再次在内部元素上设置transform-style: preserve-3d

.card .side {
  backface-visibility: hidden;
  border: none;
  background: #fafafa;
  border-radius: 0px;
  height: 100%;
  width: 100%;
  /* makes FF happy */
  transform-style: preserve-3d;
}
.card .back {
  font-size: x-small!important;
  transform: rotateY(180deg);
}
.card {
  transform-style: preserve-3d;
  height: 100%;
  position: absolute;
  width: 100%;
  animation: spin 2500ms linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.small_icon {
  font-size: x-small!important;
}
.badge1 {
  position: absolute;
  top: 7px;
  left: 100px;
}

<div class="badge1">
  <div class="card-container badge1"></div>
  <div class="card">
    <div class="side back">
      <span class="txt">10</span>
    </div>
    <div class="side">
      <i class="material-icons small_icon">remove_red_eye</i>
    </div>
  </div>
</div>

Firefox动画中的CSS动画错误

2 个答案: