css - 鼠标离开目标时背景过渡闪烁

Question

我正在尝试使用过渡为背景属性设置动画。

当我将鼠标悬停在目标上时，它运行顺畅，但当我离开时，它就像闪光!

进出不应该顺畅吗？

看起来这个闪烁的问题背后是混合模式，或者其他什么，所以我需要解释。

a {
    position:relative;
    display:block;
}

img {
    position:relative;
    width: 172px;
    border-radius:15px;
    float:left;
    margin-bottom:10px;
    filter:grayscale(100%);
}
    
a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 242px;
    background: #2d293e;
    content: " ";
    display: block;
    border-radius: 14px;
    mix-blend-mode: screen;
    transition: opacity 300ms ease-in-out,background 400ms ease-in-out;
}

a:hover::after {
    background:#FF0101;
    opacity:0.1;
}

<a>
    <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" alt=""/>
</a>

Answer 1

为鼠标移入和移出尝试不同的过渡，然后您将有更好的控制，并且可以避免闪光

a {
  position: relative;
  display: block;
}

img {
  position: relative;
  width: 172px;
  border-radius: 15px;
  float: left;
  margin-bottom: 10px;
  filter: grayscale(100%);
}

a::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 172px;
  height: 242px;
  background: #2d293e;
  content: " ";
  display: block;
  border-radius: 14px;
  mix-blend-mode: screen;
  transition: opacity 400ms  ease-in, background 250ms  ease-in;
}

a:hover::after {
  background: #FF0101;
  opacity: 0.1;
  transition: opacity 250ms ease-in, background 400ms ease-in;
}

<a>
  <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" >
</a>