html - 如何使translateX过渡到在Firefox中工作？

此代码在Chrome中有效，但在Firefox中无效。关于如何解决它的任何想法？将鼠标悬停在上面时，门应该会打开，并且景观图像会滚动，但是在Firefox中，除非鼠标位于右边缘，否则门不会完全打开。 （我不允许更改html或使用CSS以外的任何东西）

https://jsfiddle.net/rr3nj7dr/

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

最佳答案

由于您正在translate() -ing .door（它将移动.door），因此，当您将鼠标悬停在父li上时，而不是当您将鼠标悬停在.door上时，将触发转换。

  #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>