マウスオーバー時のグラデーションのアニメーション
マウスオーバー時のグラデーションのアニメーションをするには次の方法があります。
対応方法
background-positionを使用するパターン
CSS
linear-gradient関数の0%から50%までを通常の色、50%から100%をオーバーしたときの色をそれぞれ設定します。
background-sizeプロパティでオーバー分の色を倍に広げ、hoverでbackground-positionで広げた分の距離を移動しています。
transitionプロパティで対象をbackground-positionにすることで、アニメーションします。
疑似要素とopacityを使用するパターン
CSS
オーバー用の疑似要素を作り、positionプロパティで重ねて不透明度を0に設定します。
hover時にオーバー用の疑似要素の不透明度を1にします。
疑似要素にあるtransitionプロパティで対象をopacityにすることで、アニメーションします。