css flip animation not working in mozilla - html

Question

My css flip animation is working perfectly in chrome but not working in mozilla firefox. I am wondering why even though i have provided the moz- prefix.It is working perfectly in microsoft edge even.Can you please help me? I am unable to figure out the problem.. .. . I have edited the question and added the html part as well. please have a look at it.
styles.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
/* border: 1px solid #ccc; */
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 220px;
height: 180px;
text-align: center;
margin:auto;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
/*background: url(/web/images/movies.jpeg) 0 0 no-repeat;*/
z-index: 2;
}
#background1{
background: url(/web/images/movies.jpeg) 0 0 no-repeat;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
/* background: #f8f8f8; */
/* background: url(/web/images/paytm.png) 0 0 no-repeat; */
}
html. .. . ..
<div style="text-align:center" class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper" style="text-align:center">
<div class="front">
<img src="/web/images/gk.jpg" alt="" />
<h2 id="play" style="text-align-last: center">GENERAL KNOWLEDGE</h2>
</div>
<div class="back">
<a href="/pksGK">
<img src="/web/images/pks.png" alt="" />
<h2 id="play" style="text-align-last: center">blah</h2>
</a>
</div>
</div>
</div>