css - CSS3 中的过渡在 Firefox 或 Internet Explorer 中不起作用

Question

我正在创建一个小型企业页面。我有一个为导航按钮创建的背景图像。我希望它们在悬停在图像上时具有过渡效果。它适用于 Chrome，但我不明白为什么我的代码无法在 Firefox 或 Internet Explorer 中运行。

.nav li a.active {
    background-image: url('../images/02amainhover.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: center center;
    width: 245px;
    height: 74px;
    left: 72px;
    top: 432px;
    position: fixed;
    transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
}
.nav li a.active:hover {
    background-image: url('../images/03amainhover.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: center center;
    width: 245px;
    height: 74px;
    left: 72px;
    top: 432px;
    position: fixed;
    transition: all .8s ease-in;
    -moz-transition: all .8s ease-in;
}

Answer 1

几件事。首先是你有太多重复的代码。在您告诉它更改代码之前，网站会采用相同的代码，因此复制所有这些样式毫无意义。你只需要用你想要转换的东西来更新它。也就是说，您不能转换背景图像。请引用此列表以了解过渡样式:https://www.w3.org/TR/css3-transitions/#animation-of-property-types-