翻转动画在Firefox上不起作用

我遵循本教程在我的网站上加入了卡片翻转。我学到了一个重要的教训，那就是不要让你的网站在没有在所有主要浏览器上测试的情况下上线，因为动画在Firefox上无法正常工作——它只是来回翻转。我知道我应该添加供应商前缀，我想我已经全部得到了，但可能没有。

注意：关于如何在Firefox中进行调试的一些一般建议也将不胜感激。我通常使用Chrome，但我不太擅长。

css

/* entire container, keeps perspective */
.flip-container {
    -moz-perspective: 1000;
    perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container, .front, .back {
    width: 320px;
    height: 480px;
    margin: 10px 0 10px 0;
}
/* flip speed goes here */
.flipper {
    -moz-transition: 0.6s;
    transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
.front, .back {
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
    -moz-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
    box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
}
/* front pane, placed above back */
.front {
    z-index: 2;
}
/* back, initially hidden pane */
.back {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #99CCFF;
}
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    margin: 20px 26px 32px 26px;
}
.flip-container, .front, .back {
    width: 240px;
    height: 240px;
}
.flipper {
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -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;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}
.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.front {
    z-index: 2;
}

html

    <div class='wedding_party_row'>
        <div class='wedding_party_row_contents'>
            <div class = 'wedding_party_header'>
                The Officiant
            </div>
            <div class='wedding_party_member'>
               <div class="flip-container" ontouchstart="this.classList.toggle('onmouseover');">
                <div class="flipper">
                    <div class="front">
                        <div class="party_image"><img /></div>
                    </div>
                    <div class="back">
                        <div class="party_text_container">
                            <div class="party_text">Blah blah</div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>