2
ユーザーがボタンの上を移動すると、左から右に色があります。私がそれを浮かべると、滑らかな移行をするのではなく、少しちらつきます。CSSトランジションがちらつきます
どうすれば修正できますか?
.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">
の可能性のある重複[ボックスシャドウホバー遷移点滅(https://stackoverflow.com/questions/47168067/box-shadow-hover-transition-blinking) – showdev
も参照[ 「ボックスシャドウ」をアニメーション化する方法(http://tobiasahlin.com/blog/how-to-animate-box-shadow/) – showdev
[CSSボタンアニメーションからフリッカーを削除する方法](https:// stackoverflow.com/questions/45287718/how-to-remove-flicker-from-css-button-animation) – showdev