hoverした時に徐々に文字の色を変えよう

hoverしたときに、文字の色が変わる方法について今回は書かせていただきます。考え方は非常にシンプルです。通常時の色の設定とhoverしたときの文字の色を設定をcssに記述するだけです。ただ今回は、徐々に変化するということで、そこに色が変化するまでの時間を記述する必要があります。

htmlの構造

今回は、hoverしたときの色の変わり方の時間変化を見るために３つの文字を出力するhtmlを用意します。

<div class="moji_color_1">文字の色が変わるのに1秒かかります。</div>
<div class="moji_color_2">文字の色が変わるのに5秒かかります。</div>
<div class="moji_color_3">文字の色が変わるのに10秒かかります。</div>

上記の３つのclassにcssを当てていこうと思います。

cssのご紹介

上記のhtml構造に対して、cssを当てていこうと思います。
時間変化については、transitionを使用します。これを使うことで、hoverしたときとしてないときの変化時間をコントロールすることができます。

<style>
.moji_color_1,
.moji_color_2,
.moji_color_3{
 color:#000;
}
.moji_color_1:hover,
.moji_color_2:hover,
.moji_color_3:hover{
 color:#f00;
}
.moji_color_1,
.moji_color_1:hover{
 transition:1s all;
}
.moji_color_2,
.moji_color_2:hover{
 transition:5s all;
}
.moji_color_3,
.moji_color_3:hover{
 transition:10s all;
}
</style>

文字にマウスを当てて見てください。1秒は非常に早く色が変わるかと思いますが、5秒、10秒を色が変わるまでに長いと感じると思います。色が変わるまでマウスを文字から動かさないようにしてください。