具有不透明度和过渡的动画混合模式答案

【问题标题】：Animate Blend Mode with opacity and transition具有不透明度和过渡的动画混合模式
【发布时间】：2018-06-20 17:27:14
【问题描述】：

我正在寻找一种方法来改变background-color-blend-mode 的不透明度，例如 Photoshop。我的目标是为混合模式的不透明度设置动画以使其消失。有什么想法吗？

#img-esadvalence {
  background-image: url(http://leodurand.fr/works/planesad/esad1.jpg);
  background-color: #e12a1c;
  background-blend-mode: screen;
}

.all-img-menu {
    background-size: contain;
    background-position: center; 
    width: 110%;
    padding-bottom: 40.75vh;
    display: block;
    top: 50%;
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%); 
    transform: translate(0%,-50%);
    position: absolute;
    transition: all 0.6s ease;
}

&lt;div id="img-esadvalence" class="all-img-menu"&gt;&lt;/div&gt;

【问题讨论】：

你的意思是你想把图像动画化（这样你最终会看到一个红色的背景）？还是要将混合模式补间回normal？

标签： css mix-blend-mode background-blend-mode

【解决方案1】：

混合模式仅在有 2 个背景时有效。要逐渐取消混合模式，您可以设置动画（过渡）为透明背景色。

演示（悬停图片查看效果）：

#img-esadvalence {
  background-image: url(https://placeimg.com/640/480/animals);
  background-color: #e12a1c;
  background-blend-mode: screen;
  transition: background-color 1s;
}


#img-esadvalence:hover {
  background-color: transparent;
}

.all-img-menu {
    background-size: contain;
    background-position: center; 
    width: 110%;
    padding-bottom: 40.75vh;
    display: block;
    top: 50%;
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%); 
    transform: translate(0%,-50%);
    position: absolute;
    transition: all 0.6s ease;
}

&lt;div id="img-esadvalence" class="all-img-menu"&gt;&lt;/div&gt;

【讨论】：