2017-11-30 18 views
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">

View on JSFiddle

+0

の可能性のある重複[ボックスシャドウホバー遷移点滅(https://stackoverflow.com/questions/47168067/box-shadow-hover-transition-blinking) – showdev

+0

も参照[ 「ボックスシャドウ」をアニメーション化する方法(http://tobiasahlin.com/blog/how-to-animate-box-shadow/) – showdev

+1

[CSSボタンアニメーションからフリッカーを削除する方法](https:// stackoverflow.com/questions/45287718/how-to-remove-flicker-from-css-button-animation) – showdev

答えて

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">

関連する問題