我有以下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。如何以跨浏览器的方式实现此功能?
答案 0 :(得分:17)
如果未在元素中指定初始值,则浏览器不会对属性应用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
)。
答案 1 :(得分:4)
我不知道为什么top
css属性在firefox中做动画很奇怪,即使它在css中列为animation behaviour property。
无论如何,使用margin-top
代替top
在Firefox中正常运行。
但是我想建议使用transform
的“ translateX ”和“ translateY ”css属性,而不是下次使用定位,因为它很有效率。 ({{3>}推荐)
答案 2 :(得分: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);
}
答案 3 :(得分:2)
这绝对不是转换声明或您编写的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中成功动画,如您所见: