CSS转换不适用于FF中的top属性

Question

我有以下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

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

注意：我还建议使用格林先生回答中提到的相同选项（transform）。

Answer 2

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

无论如何，使用margin-top而不是top在Firefox中运行良好。

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

Answer 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);
}

Answer 4

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

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

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/