如何让 translateX 转换在 Firefox 中工作？答案

【问题标题】：How to get translateX transition to work in firefox?如何让 translateX 转换在 Firefox 中工作？
【发布时间】：2017-03-14 07:50:16
【问题描述】：

此代码适用于 Chrome，但不适用于 Firefox。关于如何修复它的任何想法？当您将鼠标悬停在门上时，门应该会打开，并且横向图像会滚动，但在 Firefox 中，除非鼠标位于右边缘，否则门不会完全打开。（我不允许更改 html 或使用 css 以外的任何东西）

https://jsfiddle.net/rr3nj7dr/

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

【问题讨论】：

标签： html css firefox hover

【解决方案1】：

由于您是 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>

【讨论】：

【解决方案2】：

@-moz-关键帧 -moz-动画我希望图片对你有帮助:) https://i.stack.imgur.com/aAVmo.png

【讨论】：

【解决方案3】：

给你。试试这个。

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

【讨论】：