CSS animations transitioning from behind other elements broken in Firefox

Question

Here's a simple example of what I mean.

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

-

If you view in Chrome, both black bars slide out perfectly. The one transitioning from behind, and the one in front.

If you view it in Firefox, the bar transitioning from behind is broken. It sometimes works, but mostly it ignores the slide animation and just appears at the end of the animation duration.

I've re-created this a number of times and it seems that items that transition from behind another element are broken in firefox.

I've tried using -moz- which doesn't work. IS there anything else you can think of?

I've tried it without the absolute positioning, with z-indexs. and nothing seems to work.

EDIT ----

I appreciate work-around ideas, but I'd really like to know the route cause of this if anyone knows?

Thanks very much.

Answer 1

It seems Firefox is inconsistent when animate the transform property, and I can't say why (yet), most likely a bug though.

Here is 2 workarounds to achieve the same effect

 .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

The solution relies on the z-index property of your elements: if you don't specify it the elements lay out one on top of the others, following the flow of the HTML document, when their "position" is set to "absolute". So "ht-txt1" is underneath "headtest" and "ht-tx2" is on top of "headtest".

To correct this "ht-tx1" and "ht-tx2" should take a "z-index" value of -1, so they are hidden underneath "headtest".

As for FF compatibility you need to prefix your "transform" effect with -moz-, check http://caniuse.com/#feat=transforms2d for more details.

Here's the CSS style code:

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