CSS transition is flickering

Question

When the user hovers over my button, there is a color coming from left to right. When I hover it, instead of having a smooth transition, it is flickering a bit.

How can I fix that?

.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

Possible duplicate of [Box-shadow hover transition blinking](https://stackoverflow.com/questions/47168067/box-shadow-hover-transition-blinking) — showdev, Nov 30 '17 at 18:17
Also see [How to animate "box-shadow"](http://tobiasahlin.com/blog/how-to-animate-box-shadow/) — showdev, Nov 30 '17 at 18:18
Also see [How to remove flicker from CSS button animation?](https://stackoverflow.com/questions/45287718/how-to-remove-flicker-from-css-button-animation) — showdev, Nov 30 '17 at 18:21
Possible duplicate of [How to remove flicker from CSS button animation?](https://stackoverflow.com/questions/45287718/how-to-remove-flicker-from-css-button-animation) — WizardCoder, Dec 02 '17 at 13:55

score 2 · Answer 1 · answered Jan 04 '18 at 20:17

Simply add a very small spread radius to the initial box shadow value. In this case 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">

CSS transition is flickering

1 Answers1