为什么转换在我的情况下不起作用

Question

我想知道为什么我的转换在 Wordpress 中不起作用，而在 Codepen 中却可以正常工作。悬停在项目上会改变背景，但它也应该与 transition

试图找出这是否只是我的愚蠢错误或 Wordpress 中的其他东西可能会阻止它，我已经筋疲力尽了。

Here is my codepen

：Codepen

Here is the website I'm applying it to:Wordpress page

Answer 1

改变从背景到背景图像的过渡

background-image 350ms cubic-bezier(0.77, 0, 0.175, 1)

.container #picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f5bf30;
    transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

来源：http://css3.bradshawenterprises.com/cfimg/

编辑 1：

使用 1x1px 图片的初始背景

.container #picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
    transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

本例中使用的图片是用png-pixel生成的

编辑 2：

我查看了您对我建议的更改的实施，

您想将transition: background 1350ms cubic-bezier(0.77, 0, 0.175, 1) !important; 替换为transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1); 以进行初始设置.container #picture

当我测试它时，它就像这样完美地工作。

并删除您添加到.container #picture.one、.container #picture.two、...等的规则

编辑 3：

并排示例显示颜色到图像和图像到图像转换之间的差异；

.square {
  width:150px;
  height:150px;
  transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
  float: left;
  margin-right:50px;
}
.example-1 {
  background: #f5bf30;
}

.example-2 {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
}
.example-1:hover, .example-2:hover{
 background-image:url(https://via.placeholder.com/150);
}

<div class="square example-1"></div>
<div class="square example-2"></div>