[CSS]リンクにカーソルを乗せた時にゆっくり色を変更する方法

Webデザインでリンクの上にマウスカーソルを乗せた気に、ゆっくり色が変わる方法を紹介します。

transitionプロパティで実装する

リンクの上にマウスを乗せると色がゆっくり変わるものを実装します。

コード解説

ふわっと時間をかけて変更していくようにするには、transitonプロパティで実装することができます。

1.0sという値は1秒ということ。sはsecond(秒)の略ですね。

これを0.5sにすると0.5秒かけて変化していくので、少し速い変化になります。

該当箇所を1.0sから変更してみて試してみてください。