【CSS】hoverすると背景のグラデーションが変化する【transitionが効かない】

コーディング
スポンサーリンク

hoverすると背景グラデーションに動きをつけたい

hoverするとネイビーっぽいグラデーションからレッドのグラデーションへ変化します。

See the Pen
rNMBZBR
by nzm (@nzm)
on CodePen.

背景グラデーションにtransitionが効かない問題

普通に背景グラデーションをアニメーションさせようとするとこうなります。
しかしこれだとtransitionが効かず、なめらかなアニメーションになりません・・・。

See the Pen
OJRLoNO
by nzm (@nzm)
on CodePen.

そこで、書き方を工夫するとtransitionを効かせた滑らかな動きをつけることができます。

 

background-sizeとbackground-positionを使う

 hover前 

background: linear-gradient(to right,スタートの色 0%, 真ん中の色 51%, 終わりの色 100%);
background-size: 200% auto;

最初にグラデーション3色をbackground: linear-gradientで指定し、background-sizeを200%で2倍にして、
その前半の半分(0%〜100%)をhover前、後半の半分(100%〜200%)をhover後として反映させるという感じです。

イメージとしてはこんな感じです。
背景グラデーションにtransitionが効かせる

見える範囲は100%までなので、hover前はネイビー〜グレー部分だけが見えている状態です。

 

 hover後 

:hover {
background-position: right center;
}

これでhoverした時に背景が右側へ動き、後半の半分(100%〜200%)のグレー〜レッド部分だけが見えるようになるという仕組みです。

コメント

タイトルとURLをコピーしました