不透明度とトランジションのアニメーションブレンドモード

Question

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; 
 
}

<div id="img-esadvalence" class="all-img-menu"></div>

Answer 1

2背景がある場合、ブレンドモードのみ動作します。徐々にブレンドモードをキャンセルするには、透明な背景色にアニメート（トランジション）することができます。

デモ（効果を見るために画像を合わせる）：あなたが最後に赤の背景が表示されるように、あなたが（離れて画像をアニメーション化する

#img-esadvalence { 
 
    background-image: url(http://leodurand.fr/works/planesad/esad1.jpg); 
 
    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; 
 
}

<div id="img-esadvalence" class="all-img-menu"></div>