CSS 过渡不适用于 FF 中的 top 属性答案

【问题标题】：CSS transition does not work on top property in FFCSS 过渡不适用于 FF 中的 top 属性
【发布时间】：2013-08-28 17:20:12
【问题描述】：

我有以下 HTML：

<ul>
    <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;  
    text-align: center;
}
ul li {
    position: relative;
    float: right;
    margin-right: 20px;
    width: 30%;
}
ul li {
    transition: all 0.3s;
}
ul li:hover {
    top: -10px;
}
ul li> a{
    color: red;
}

问题是过渡不适用于 moz，它适用于 webkit。如何以跨浏览器的方式实现这一点？

DEMO

【问题讨论】：

标签： css firefox cross-browser css-transitions

【解决方案1】：

如果元素中未指定属性的初始值，浏览器不会对属性应用transition。因此，将top: 0px 添加到ul li 将解决此问题。

ul {
  list-style: none;
  text-align: center;
}
ul li {
  position: relative;
  float: right;
  margin-right: 20px;
  top: 0px; /* this line was added */
  width: 30%;
}
ul li {
  transition: all 0.3s;
}
ul li:hover {
  top: -10px;
}
ul li> a {
  color: red;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
</ul>

注意：我还建议使用与 Mr_Green 的回答中提到的相同的选项 (transform)。

【讨论】：

【解决方案2】：

我不知道为什么 top css 属性在 Firefox 中做动画时表现得很奇怪，即使它在 css 中被列为 animation behaviour property。

无论如何，在 Firefox 中使用 margin-top 而不是 top 可以正常工作。

但我想建议使用 transform 的 "translateX" 和 "translateY" css 属性，而不是从下一次开始使用定位，因为它很有效. （由Paul Irish推荐）

【讨论】：

我认为如果将top: 0px 添加到原始代码中，它仍然可以正常工作（不是说更好，但它会工作）。我记得之前读过关于 SO 的答案，其中指出当原始元素中未提及该属性时，FF 不应用转换。
@Harry 是的，没错。才意识到。 :) 这里是working fiddle。

【解决方案3】：

试试这个：

ul li { 
    /* standard property and other vendor prefixes */
    -moz-transition: -moz-transform 0.3s;
}
ul li:hover {
    /* standard property and other vendor prefixes */
    -moz-transform: translateY(-10px);
}

【讨论】：

@Sam 添加-moz-transition 供应商前缀，也不要删除transition css 属性。如果您也这样做了，请忽略此消息。
@Mr_Green 是的！ Mr_green 我也试过了.. 我也更新了演示
@Sam 似乎问题出在top css 属性上。当我用margin-top 替换top 时。它工作正常。
然后使用这个，ul li { -moz-transition: -moz-transform 0.3s; } ul li:hover { -moz-transform: translateY(-10px); }
格林先生的回答非常适合您。你的 position:relative;top:-10px 是在告诉 FF 简单地将你的 div 相对于其基线移动 -10px，而不是按照 green 先生的建议设置动画。

【解决方案4】：

这绝对不是过渡声明或您编写的 CSS 中的任何其他内容 --- 尝试将 opacity:.5 添加到悬停状态，您会看到它的动画效果很好。

因此，出于某种原因，Firefox 没有转换 top 属性。老实说，我还不知道为什么。我现在的解决方案是使用 CSS 转换将项目向上移动 10 像素：

ul li:hover {
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);

}

如您在此处看到的，这在 Firefox 中成功制作动画：

http://jsfiddle.net/y7yQQ/7/

【讨论】：

谢谢大卫，我将使用 margin-top 而不是 top :)
@Sam 是的，好点子，用更少的 CSS 就能达到同样的效果！