html - 从 Firefox 中损坏的其他元素后面过渡的 CSS 动画

Question

Here's一个简单的例子来说明我的意思。

HTML

<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>

CSS

.main-container {
    width: 100%;
    height: 200px;
    margin: 250px 0 0 0;
    position: relative;
    background-color: yellow;
}

.headtest {
    font-family: 'quicksand', helvetica;
    background-color: #a2aba2;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

.ht-tx1 {
    width: 100%;
    height: 20px;
     text-align: center;
     background-color: #000;
     animation: test-ani1 2s forwards;
     position: absolute;
     top: 0;
     right: 0;
}

.ht-tx2 {
    width: 100%;
    height: 20px;
    text-align: center;
    background-color: #000;
    animation: test-ani2 2s forwards;
    position: absolute;
    bottom: 0;
    right: 0;
}



@keyframes test-ani1 {

    100% {
        transform: translateY(-20px);
    }
}

@keyframes test-ani2 {

    100% {
        transform: translateY(20px);
    }
}

-

如果您在 Chrome 中查看，两个黑条都会完美地滑出。一个从后面过渡，一个在前面。

如果你在 Firefox 中查看它，从后面过渡的栏是坏的。它有时会起作用，但大多数情况下它会忽略幻灯片动画并仅出现在动画持续时间结束时。

我已经重新创建了很多次，似乎从另一个元素后面过渡的元素在 Firefox 中被破坏了。

我试过使用 -moz-，但没有用。还有什么你能想到的吗？

我在没有绝对定位的情况下尝试过，使用 z-indexs。似乎没有任何效果。

编辑----

我很欣赏解决方法，但如果有人知道的话，我真的很想知道造成这种情况的原因？

非常感谢。

Answer 1

似乎 Firefox 在为 transform 属性设置动画时不一致，我还不能说为什么(还)，不过很可能是一个错误。

这里有两种解决方法可以达到同样的效果

.main-container {
    width: 100%;
    height: 200px;
    margin: 50px 0 0 0;
    position: relative;
    background-color: yellow;
}

.headtest {
    font-family: 'quicksand', helvetica;
    background-color: #a2aba2;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

.ht-tx1 {
    width: 100%;
    height: 20px;
     text-align: center;
     background-color: #000;
     animation: test-ani1 2s forwards;
     position: absolute;
     top: 0;
     right: 0;
}

.ht-tx2 {
    width: 100%;
    height: 20px;
    text-align: center;
    background-color: #000;
    animation: test-ani2 2s forwards;
    position: absolute;
    bottom: 0;
    right: 0;
}



@keyframes test-ani1 {
    0% {
        transform: translateY(-1px);
    }
    0.1% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes test-ani2 {
    100% {
        transform: translateY(20px);
    }
}

<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>

.main-container {
  width: 100%;
  height: 200px;
  margin: 50px 0 0 0;
  position: relative;
  background-color: yellow;
}

.headtest {
  font-family: 'quicksand', helvetica;
  background-color: #a2aba2;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx1 {
  width: 100%;
  height: 20px;
  text-align: center;
  background-color: #000;
  animation: test-ani1 2s forwards;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx2 {
  width: 100%;
  height: 0px;
  text-align: center;
  background-color: #000;
  animation: test-ani2 2s forwards;
  position: absolute;
  bottom: 0;
  right: 0;
}


@keyframes test-ani1 {
  100% {
    top: -20px;
  }
}

@keyframes test-ani2 {
  100% {
    height: 20px;
    bottom: -20px;
  }
}

<div class="main-container">
  <div class="ht-tx1"></div>
  <div class="headtest"></div>
  <div class="ht-tx2"></div>
</div>