どのようにtranslateXの移行をFirefoxで動作するようにするには？

Question

このコードはChromeでは動作しますが、Firefoxでは動作しません。どのように私はそれを修正することができますか？マウスの右端に表示されていない限り、ドアは完全に開くことはありません。あなたが置くと移行を

https://jsfiddle.net/rr3nj7dr/

<ul id="calendar"><li><div class = "door">15</div></li></ul> 

Answer 1

あなたはtranslate()（.doorを移動します）.doorを-ingしているので、トリガー（私はHTMLを変更したり、CSS以外のものを使用することはできませんよ）親li、ホバーしないとき.door。 -moz-キーフレーム -moz-アニメーション @

#calendar { 
 
    width: 550px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    } 
 
    
 
    #calendar li { 
 
    list-style: none; 
 
    float: left; 
 
    width: 110px; 
 
    height: 110px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 30px; 
 
    background-image: url(http://i.imgur.com/C68wDiS.jpg); 
 
    } 
 
    
 
    .door { 
 
    width: 110px; 
 
    height: 110px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    color: white; 
 
    text-align: center; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 50px; 
 
    vertical-align: middle; 
 
    line-height: 110px; 
 
    transition: transform 1s ease-in-out; 
 
    background-color: grey; 
 
    } 
 
    
 
    #calendar li:hover .door { 
 
    transform: translateX(110px); 
 
    } 
 
    
 
    #calendar li:hover { 
 
    animation: slidingfour 3s ease-in-out; 
 
    } 
 
    
 
    @keyframes slidingfour { 
 
    0% { 
 
     background-position: 0px; 
 
    } 
 
    100% { 
 
     background-position: -330px; 
 
    } 
 
    }

<ul id="calendar"> 
 
    <li> 
 
    <div class="door">15</div> 
 
    </li> 
 
</ul>

Answer 2

私は絵はあなたが行くここ https://i.stack.imgur.com/aAVmo.png

Answer 3

:)を助けることを願っています。これを試して。

-webkit-transform: translateX(110px); /* Chrome, Safari, Opera */ 
-moz-transform: translateX(110px); /* Firefox */ 
-ms-transform: translateX(110px); /* IE 9 */