css - CSS 过渡不会在 Firefox 或 IE 中发生

Question

我有一个简单的风格，如：

li, a {
    display: inline-block;
}
li {        
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}

这应该与菜单中的某些图标一起使用，以便当您将鼠标悬停在它们上时它们会下沉。它在 Chrome 中运行良好，但在 IE 或 FF 中不行。这可能有什么问题？

Answer 1

Firefox 和 IE 要求您为动画属性指定初始属性。

所以：

li, a {
    display: inline-block;
}
li {        
    top: 0;        /* ADD THIS! */
    relative: 0;   /* This is important too or the item will pop back   
                      instead of transition*/
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}