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

在为transform属性设置动画时，似乎Firefox不一致，我不能说为什么（还），很可能是一个bug。

这是达到相同效果的2种解决方法

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

Answer 2

解决方案依赖于元素的z-index属性：如果你没有指定它，那么元素在HTML文档的流程之后，当它们的“position”设置为“绝对”。因此“ht-txt1”位于“headtest”之下，“ht-tx2”位于“headtest”之上。

要纠正这个“ht-tx1”和“ht-tx2”应该采用-1的“z-index”值，所以它们隐藏在“headtest”下面。

至于FF兼容性，您需要在“变换”效果前加上-moz-的前缀，请查看http://caniuse.com/#feat=transforms2d以获取更多详细信息。

这是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;
         z-index: -1;
    }

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

    @keyframes test-ani1 {

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

    @keyframes test-ani2 {

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

CSS动画从Firefox中破坏的其他元素后面转换

我很欣赏周到的想法，但如果有人知道，我真的想知道这个问题的原因吗？

2 个答案: