CSS3 中的转换在 Firefox 或 Internet Explorer 中不起作用

Posted 2023-03-06

【中文标题】CSS3 中的转换在 Firefox 或 Internet Explorer 中不起作用

【英文标题】：Transition in CSS3 not working in Firefox or Internet Explorer

【发布时间】：2016-12-19 18:32:46

【问题描述】：

我正在创建一个小型企业页面。我有一个为导航按钮创建的背景图像。我希望它们在悬停在图像上时具有过渡效果。它可以在 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;

【参考方案1】：

几件事。首先是你有太多重复的代码。网站假定相同的代码，直到你告诉它改变它，所以复制所有这些样式是没有意义的。你只需要用你想要转换的东西来更新它。话虽如此，您无法转换背景图像。请参考此列表以了解过渡样式：https://www.w3.org/TR/css3-transitions/#animation-of-property-types-

【讨论】：

这有点多，我想这可以解释为什么它不能正常工作！谢谢，我可以看到参考表对我很有用。至于重复的代码部分，我认为这很好补充吗？之前有人曾经提到，有时浏览器需要重复代码以获得更多规范，而缺少重复代码有时可能是代码无法正常运行的问题？

旧版浏览器 (IE6) 需要为 :hover 重复代码以获取任何更改的值。基本上它需要知道如何更改 :hover 以及如何再次更改。

如果人们还在为 IE6 编写代码，那他们就做错了。

【参考方案2】：

您可以制作两个具有位置的图像：绝对和不同的 z-index。顶部的图像可以有从 1 到 0 的不透明度过渡。它适用于所有浏览器。

【讨论】：

降低不透明度可以给我想要的过渡效果吗？因为我不想要任何花哨的过渡，只需要一个简单的“全部”过渡效果，这样我的图像就会在悬停时从一个过渡到另一个？

【参考方案3】：

正如@Chris Stanley 指出的那样，您无法转换背景图像。

您有很多选择，具体取决于您的过渡的确切外观。我没看过图片。

您可以使用filters 您可以将多个图像合并到一个图像文件（网格、顶部/底部等）中，然后使用背景定位“移动”（即时）从一个图像文件到另一个图像文件。您可以将其与其他过渡或过滤器结合使用以提供额外的效果。这是一个非常古老的技巧，您可以通过添加过渡和过滤器来进行新的改进。

编辑（看到图片后）： 您的新代码可能如下所示：

.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 0.8s ease-out;

    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5);



.nav li a.active:hover 

    filter: invert(100%);
    transition: all 0.8s ease-in;

（我认为您也不再需要-moz-transition。）

【讨论】：

那么你的意思是，我可以添加过渡代码或类似于过滤器的代码，效果会一样吗？

可能不是“相同的”，但您仍然可以做很多事情。我还没有看到你的两张图片......你可以创建几乎完全相同的效果，但如果没有看到你想要做什么，我无法判断。

我可以给你看我的两张图片，我有它们的链接：这是我的主要图片：freewebs.com/aph-imvu/02amainhover.png 这是我的第二张图片：freewebs.com/aph-imvu/03amainhover.png

基本上，我要做的是将第二张图像与第一张图像进行过渡，这样，当它悬停在上面时，图像就会过渡到我创建的较亮的图像。跨度>

它具有我在 Chrome 中所追求的确切效果，但在 Internet Explorer 和 Firefox 中却没有。因此，如果我能将它的效果与 Chrome 中的效果相似，但适用于所有浏览器，那就太好了，而且不会那么令人头疼。