CSS Transition not working in only Mozila firefox browser

问题

Trying to fix this CSS3 Transition for Mozila firefox, it's working perfectly in Chrome and Opera but not working in Mozila firefox 35.0.1+ . I have also applied -moz-keyframes on CSS.

CSS:

/******************
* Bounce in Left *
*******************/
@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-1000px);
    }

    80% {
        -webkit-transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-1000px);
    }

    80% {
        -moz-transform: translateX(-10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-1000px);
    }

    80% {
        -o-transform: translateX(-10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-1000px);
        -moz-transform: translateX(-1000px);
    }

    80% {
        transform: translateX(-10px);
        -moz-transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
        -moz-transform: translateX(0px);
    }
}

.animated.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    -moz-animation-name: bounceInLeft;
    -o-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

/****************
* bounceInRight *
****************/
@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1000px);
    }

    80% {
        -webkit-transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(1000px);
    }

    80% {
        -moz-transform: translateX(10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(1000px);
    }

    80% {
        -o-transform: translateX(10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(1000px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.animated.bounceInRight {
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -o-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

/* Description */
#headslide p {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);

margin:0;
}

/* Title */
#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;

background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}

HTML:

<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#"><img src="wallpaper.jpg" height="260" width="350"/></a>
</div>
<span class="content-margin">
<p>Description on top.</p>
<h3><a href="#">Title on bottom</a></h3>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#"><img src="picture.jpg" height="260" width="350"/></a>
</div>
<span class="content-margin">
<p>Description on top.</p>
<h3><a href="#">Title on bottom</a></h3>
</span>
</li>
</ul>
<div class="pager"></div>
</div>

There are two type effects bounceInLeft (Applied on Title on bottom) and bounceInRight (applied on description on top). On Chrome it's working perfectly but not working on Mozila firefox. This Slider has fade transition by default, so it show fade transition on firefox and my bounceInLeft/bounceInRight keyframes works only on Chrome, Opera.

How to fix this?

Please See this Fiddle >> on Mozila firefox 35.0.1+ and on latest Chrome. Thanks.

来源：https://stackoverflow.com/questions/30581115/css-transition-not-working-in-only-mozila-firefox-browser