Question

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

https://jsfiddle.net/rr3nj7dr/

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

Answer 1

由于您是translate() - .door（将移动.door），因此当您悬停父li时触发转换，而不是悬停.door时1}}。

  #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

@ - MOZ-关键帧 -moz-动画我希望图片可以帮助你:) 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 */

如何让translateX过渡到firefox？

3 个答案: