リンクホバー時の色の変化をふわっと（なめらかに）させる方法を紹介します。
今回紹介するCSSプロパティは、簡単なアニメーションを作りたいときに便利です。
ぜひ色々な動きに応用してみてください。
ホバー時に別のCSSを適用する「:hover」
まずは動きのきっかけとなる「:hover」から説明します。
マウスポインターがwebサイト上にある要素の上に乗る。
このアクションをきっかけとして要素のスタイルを変化させるのが「:hover」という疑似クラスです。
例えばリンクに乗った際に、色を変えたいときなんかはこうします。
a{
color:#333;
}
a:hover{
color:#2098A8;
}このようにセレクタの後ろに「:hover」と記述するだけで、要素にマウスポインターを当てた際のスタイルを指定することが出来ます。
これはリンクの色に限らず、要素のサイズを変化させたり色々な場面で使えます。
ぜひ簡単なものから試してみてください。
サイトに動きが出て面白くなってくると思います。
ふわっと色を変化させる「transition」プロパティ
ホバーでCSSを変化させる方法は分かったと思うので、次はそれをふわっと（なめらかに）変化させる方法を見ていきましょう。
これはCSSで出来るアニメーションの1つで、「transition」プロパティを使って行います。
このサイトでも一部リンクに使っています。（記事一覧のタイトル等）
コードはこちら。
a{
color: #333;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover{
color: #2098A8;
}対象セレクタは自分の環境に合わせて変えてください。中身はそのままコピペでOKです。
上が通常時で、下がホバー時（:hover）になります。
色も変化前（通常）と変化後（ホバー時）とそれぞれ好みの色に変えてみてください。
また「0.5ｓ」の部分は変化開始から終了までの時間になるので、実際に数字を変えて試してみてください。
最後に
- 記述する場所
- 対象となるセレクタ（要素）の指定方法
CSSはこの2つさえ分かれば、ネットに公開されているコードのコピペだけで誰でも使えるようになります。
これを覚えるだけでwebの見方も大きく変わってくると思うので、ぜひ空いた時間にでもCSSと触れ合ってみてください。
