例えばボタンの背景色をグラデーションにしていて、hover時にはグラデーションを反転させたいとします。
普通に反転させるだけなら問題ないのですが、transitionを使ってじんわり変化させようとすると上手くいきません。
これはbackgroundにはtransitionが効かないのが原因で、今回はその対処法について解説します。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
backgroundのlinear-gradientでtransitionが効かない時の対処法
まずはbackgroundでグラデーションにした場合で見てみましょう。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
文字色はtransitionが効いていますが、backgroundのlinear-gradientを使った背景のグラデーションには効いていないのが分かります。
このグラデーションもじんわり変化させたいときは擬似要素を使います。
擬似要素とopacityで再現
擬似要素を使ってもbackgroundにはtransitionが効かない事には変わりないので、代わりに透過度を変化させるopacityを使って再現してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
文字色は先ほどまでと同じように変化させています。
そして背景色は2つ重ねていて、hoverすると上の背景色が透明になって下にある反転した背景色が現れるということです。
またテキストと背景色の上下関係を意識しないとテキストが背景色の後ろに隠れてしまうので、ここではspanタグで囲いposition: relative;を設定しています（spanタグを使わない場合はz-indexをマイナスにしたりする必要があります）
コードはこちらです（CSSはレイアウトのためのスタイルは省略）
<div class="btn">
<span>hover</span>
</div>.btn {
background: linear-gradient(to right,#87ceeb, #4169e1); /* 文字を上に表示するための記述 */
color: #333;
position: relative;
transition: all 1s ease-out;
}
/* 文字を上に表示するための記述 */
.btn span {
position: relative;
}
/* ボタンhover後の背景色 */
.btn::before {
background: linear-gradient(to right, #4169e1, #87ceeb);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 1s ease-out;
width: 100%;
}
/* ボタンhoverで文字色変更 */
.btn:hover {
color: #f2f2f2;
}
/* ボタンhoverで元の背景色透過 */
.btn:hover::before {
opacity: 0;
}
background-colorはtransitionが効く
おまけですが、background-colorにはtransitionが効きます。
See the Pen
ボタン（background-color） by junpei (@junpei-sugiyama)
on CodePen.
background-colorの背景色と、colorの文字色はtransitionが効いてじんわり変化しているのが分かります。
まとめ
今回はbackgroundのlinear-gradientでtransitionが効かない時の対処法を解説しました。
マニアックな内容だと思いますが、この記事が参考になったというツイートを見たことがあるので、同じ現象で悩む人もいるかと思います。
以上になります。
