Box-shadow hover transition blinking

问题

I'm trying to make box-shadow work like a slide animation over an img, by making the black background coming over from left to right. But I can't do it without this weird blinking problem. I've already looked for solutions around Stack Overflow.

I also tried it with a section instead of an img, but the result was the same.

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

回答1:

This appears to be a result of the way box-shadow is painted. Try another approach. Here's a flicker-free solution that thickens the left border instead of adding a box-shadow:

div {
  position: relative;
  display: inline-block;
}
section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  transition: 1s ease-out;
  box-sizing: border-box;
}

div:hover section {
  border-left-width: 500px;
  float: left;
  transition: 1s ease-out;
}

section~* {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #888;
}

<div class="prog">
  <section></section>
  <p>Here's some text content.</p>
</div>

https://jsfiddle.net/k5kznmvL/

回答2:

Another solution using a simple pseudo element and applying transition to width by changing its right property :

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>

回答3:

You can also simply add some kind of box shadow mock to the initial state, which has a very small spread radius.

  section {
      box-shadow: inset 0 0 0 0.01px white;
  }

来源：https://stackoverflow.com/questions/47168067/box-shadow-hover-transition-blinking

标签

css

hover

transition

slide

box-shadow