Firefox 中的 CSS 动画错误答案

【问题标题】：CSS Animation bugs in firefoxFirefox 中的 CSS 动画错误
【发布时间】：2018-04-13 07:01:00
【问题描述】：

我正在尝试旋转 2 张卡片，一张是图标，另一张是价值我的 haml sn-p 是

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

这在 chrome/chromium 和 opera 中运行良好，但在 Mozilla firefox 中，眼睛图标与数据值一起出现。我的用于 mozilla 兼容性的 CSS sn-p 是

.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>

【问题讨论】：

首先，删除这些供应商前缀，或者至少确保它们设置在非前缀前缀之前。 animation- 和 transform 属性很长时间以来都是不带前缀的，您不能确定带前缀的版本是否是最新的。
@Kaiido 试过了，没用
您能否提供一个minimal reproducible example，其中包含重现问题的计算值？
.card { height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1.5s; width: 100%; box-shadow: none; -webkit-animation-name: spin; -webkit-animation-duration: 2500ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 2500ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; }css卡属性@Kaiido的sn-p
@Kaiido 这是我的 jsfiddle jsfiddle.net/xdjotxft/7

标签： html css firefox haml

【解决方案1】：

你可以试试这个：

.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); }
    }

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

【讨论】：

【解决方案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>

【讨论】：