css - 框阴影悬停过渡闪烁

Question

我试图通过使黑色背景从左到右出现，使框阴影像 img 上的幻灯片动画一样工作。但是没有这个奇怪的闪烁问题我做不到。我已经在寻找有关 Stack Overflow 的解决方案。

我也试过用section而不是img，但结果是一样的。

Here's the JSFiddle demo

HTML

<section>
</section>

CSS

section {
  border:black 1px solid;
  width:500px;
  height:200px;
  transition:1s ease-out
}

section:hover{
  box-shadow:inset 500px 0 0 #222;
  float:left;
  transition:1s ease-out;
}

Answer 1

另一种解决方案使用简单的伪元素并通过更改其 right 属性将过渡应用于宽度:

section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  position:relative;
  color:#c2c2c2;
  text-align:center;
  padding-top:50px;
  box-sizing:border-box;
}

section:before {
  position: absolute;
  content: " ";
  top: 0;
  bottom: 0;
  left: 0;
  background: #000;
  right: 100%;
  transition:1s ease-out;
  z-index:-1;
}
section:hover::before {
  right:0;
}

<section>
  add your text here
</section>