CSS 过渡闪烁答案

【问题标题】：CSS transition is flickeringCSS 过渡闪烁
【发布时间】：2018-05-14 18:18:13
【问题描述】：

当用户将鼠标悬停在我的按钮上时，会出现从左到右的颜色。当我悬停它时，它不是平滑过渡，而是闪烁了一下。

我该如何解决这个问题？

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

View on JSFiddle

【问题讨论】：

Box-shadow hover transition blinking的可能重复
另见How to animate "box-shadow"
另见How to remove flicker from CSS button animation?
以上评论似乎解决了问题！
How to remove flicker from CSS button animation?的可能重复

标签： html css css-transitions

【解决方案1】：

只需将一个非常小的散布半径添加到初始框阴影值即可。在这种情况下box-shadow: inset 0 0 0 0.01px #D80286;。

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;   
  box-shadow: inset 0 0 0 0.01px #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

【讨论】：