html - div 的 CSS3 变换比例导致在 Firefox 中跳跃子元素

Question

我正在尝试缩放 CSS3 中的元素。这个元素有子元素，当动画完成时它们会跳来跳去。这似乎只发生在 Firefox 中。我一直在尝试在 SO 上找到的很多修复程序，但似乎没有一个能完成这项工作。

我的 HTML 设置:

<div>
<ul>
  <li class="appcenter-menu-item focus">
    <a href="#/sp">
      <div class="icon"></div>
        <label>First item</label>
    </a>
  </li>
  <li class="appcenter-menu-item focus">
    <a href="#/pep">
      <div class="icon"></div>
      <label>Second item</label>
    </a>
  </li>
    <li class="appcenter-menu-item focus">
      <a href="#/hp">
        <div class="icon"></div>
        <label>Third Item</label>
      </a>
    </li>
</ul>
</div>

悬停时的过渡:

.focus {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.focus:hover {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transform: scale(1.1);
}

我创建了一个显示完整设置的 jsfiddle:

http://jsfiddle.net/kwhq2z4t/3/

更新

我在 Windows 7 x64 上使用 FireFox 版本 32.0.1。

Answer 1

刚刚在 firefox 中遇到了这个“jump-after-transition-finished”错误。

经过一番折腾后，将 -moz-transform-style: preserve-3d; 添加到动画元素的父容器中 - 将其添加到初始状态(过渡发生前的非动画状态 -所以那只是 .focus 类)- 为我完成了这项工作。