CSS 过渡动画 Firefox 和 Safari 不起作用

如何解决CSS 过渡动画 Firefox 和 Safari 不起作用

我已经为我的背景图片设置了 css 动画，它在 chrome 上运行良好，但在 firefox 和 safari 上运行良好，您知道如何进行这项工作吗？

主页：http://argeville.projet-inwie.com/

我的动画CSS：

#test1 
{ transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out; 
-o-transition: background 0.4s ease-in-out; 
-moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out;
}

谢谢

解决方法

也许更多的代码和细节可以帮助...

首先，当您需要使您的 CSS 与“所有”浏览器兼容时，请检查此工具。 Autoprefixing tool

也请查看此帖子：https://css-tricks.com/almanac/properties/t/transition/ 正如他们所说：IE10（第一个支持过渡的稳定版 IE）不需要 -ms- 前缀。

所以这段代码就够了：

dev-master

也许尝试安装无法正常工作的最新版本浏览器。 清空浏览器缓存？ 尝试应用另一个属性而不是背景来推断是 #test1 { -webkit-transition: background 0.4s ease-in-out; -o-transition: background 0.4s ease-in-out; transition: background 0.4s ease-in-out; } 还是 transition 属性造成了问题。

快乐编码！

,

感谢您的帮助。

我试过你的代码，但还是不行。

这里是一套代码，通过鼠标的通过来管理我家的不同背景。

<script>

document.addEventListener('DOMContentLoaded',function() {
jQuery(function($){
$('.test2').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test2').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test3').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/aromes.jpg)');
});
$('.test3').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});

$('.test5').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/centres.jpg)');
});
$('.test5').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});

$('.test4').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/parfums.jpg)');
});
$('.test4').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
}); });

</script>

<style>
#test1{
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}

</style>

,

您是正确的，过渡在 Firefox 上不起作用。

这是一个简单的片段来显示问题：

#test1 
{
 transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out; 
-o-transition: background 0.4s ease-in-out; 
-moz-transition: background 0.4s ease-in-out;
 -ms-transition: background 0.4s ease-in-out;
 background-image: url(https://picsum.photos/id/1015/200/300);
 height: 200px;
 width: 200px;
}
#test1:hover {
 background-image: url(https://picsum.photos/id/1016/200/300);
}

<div id="test1"></div>

这完全取决于您想要什么，但在这种简单情况下，一种解决方法是不尝试在主要元素上进行过渡，而是在伪元素之前和之后放置背景图像，并使它们淡入淡出。 （它们不需要在实际元素中，因为不透明度变化会影响其其他内容）。

将鼠标悬停在图像上以使其过渡到另一个图像。

#test1 
{
  position: relative;
 height: 200px;
 width: 200px;
}
#test1::before,#test1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease-in-out;
}
#test1::before {
 background-image: url(https://picsum.photos/id/1015/200/300);
 opacity: 1;
 }
 #test1::after {
 background-image: url(https://picsum.photos/id/1016/200/300);
 opacity: 0;
 z-index: -1;
 }
#test1:hover::before {
  opacity: 0;
}
#test1:hover::after {
  opacity: 1;
}

<div id="test1"></div>