【CSS】transitionプロパティで簡単アニメーション!リンクの色をふわっと切り替える方法

リンク色切り替え web制作

リンクホバー時の色の変化をふわっと(なめらかに)させる方法を紹介します。

今回紹介する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.5s」の部分は変化開始から終了までの時間になるので、実際に数字を変えて試してみてください。

最後に

  1. 記述する場所
  2. 対象となるセレクタ(要素)の指定方法

CSSはこの2つさえ分かれば、ネットに公開されているコードのコピペだけで誰でも使えるようになります。

これを覚えるだけでwebの見方も大きく変わってくると思うので、ぜひ空いた時間にでもCSSと触れ合ってみてください。

css記述の基本「セレクタ」について。web専門学校で学んだcssの基本
「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。 まずはcssの特徴を見てから、記述方法を見ていきたいと思います。 cssとHT...