MENU
Basics of HTML, CSS, and JavaScript 初心者向けの解説サイト
  1. ホーム
  2. CSS
  3. 9 リンクの設定と、CSSアニメーションの実装方法

9 リンクの設定と、CSSアニメーションの実装方法

CSS
目次

Webページに動きをつける理由を考えよう

Webページに動きがあると、見る人への様々な効果があります。

視線の誘導

動きがあるとそこへ視線が移りやすいので、目立たせたい・見てほしい要素の近くに動きをつけることが多いです。
また、次にどうしてほしいのか（下にスクロールして欲しい、クリックして欲しい、など）をアピールすることができます。

また、重要なお知らせなどでは、タイプライターのようなアニメーションや、「New」というラベルの色をアニメーションさせたりして、より見てもらうためのアピールをすることもあります。

状況を伝える

ページ表示時や買い物かごで決済送信中（お待ちください）に、「処理中」だということを伝えるためにローディングアニメーションを表示したり、何％まで完了という処理状況をユーザーへ伝えたり、ページ遷移した直後にフワッと表示することで別ページに移動したことを伝えたりすることで、ユーザーに状況や現在地を分かりやすく伝えることができます。

ボタンなどでは、「マウスオーバーすると、押せるということが分かる」「クリックすると、押した感じがする」などの演出をすることが多いです。

魅力や特徴を伝える

例えば海に関連するサイトでは、波をモチーフにしたアニメーションを見かけたり、癒しをテーマにしたサイトではゆっくり・フワッとした動きをつけて演出したり、未来的にしたいときは斜めのラインをシャープに動かしたり。
印象を残しながらも、嫌みがなく、必要な箇所だけにアニメーションをつけて演出します。

こころ揺さぶるものづくりを。：
https://www.kurokitec.com/

キャラクターがドンっと動くイメージ：
https://www.nintendo.com/jp/games/switch2/aaaca/index.html

どんな動きがあるのか？

サイトにあった演出を心がけ、適材適所に動きをつける必要があります。

やたらと動きをつけてしまう（=パワポみたい）、大きく動きすぎる（=画面酔いしてしまう）など、デメリットもあるので、見る人にストレスのない程度に、気持ち良いと感じる演出を心がけます。

どのような印象を持たせたいと思ってアニメーションをつけているのか、色々なサイトを参考にして、自分の作るサイトにあった演出を考えてアニメーションを設定していきましょう。

やや動きあり
https://sankoudesign.com/category/moderate-move

印象的･細やかな動き
https://sankoudesign.com/category/impressive-move

ダイナミックな動き･動き多め
https://sankoudesign.com/category/dynamic-move

:hover ホバー疑似クラス マウスオーバーで変化させる

このページで学習を進める場合のベースとなるHTMLと画像は、以下のボタンからダウンロード可能です。

css-animation.zipをダウンロード

まずはボタンにマウスカーソルが乗った場合に、設定を変えてみましょう。
hover疑似クラスを設定します。

HTML

ボタンのHTMLは、aタグ（ジャンプ先はhref属性へセット）で作ります。

<a href="" class="btn-a">ボタン</a>

CSS

クラス名に対する基本設定を書きます。
:hover を付けたセレクタのプロパティには、マウスオーバーされた場合の設定を書きます。

.btn-a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 10px;
    padding: 8px 16px;
    color: #ffffff; /*文字色*/
    background-color: #1976d2; /*背景色*/
}

.btn-a:hover {
    color: #1976d2; /*文字色*/
    background-color: #1976d294; /*元の色に透明度を追加*/
}

ブラウザで確認

マウスオーバーで色がパッと変わりましたか？

hover疑似クラスを設定したボタン

リンク関連のその他擬似クラス

リンク関連には、hover以外にも擬似クラスがありますので、特徴をおさえておきましょう。
お知らせの記事URLのスタイルで、既に読んでいる記事のURLリンクの色を変えたい、などのケースで使います。

スタイルを定義する際は、
:link — :visited — :hover — :active の順で定義されるよう、記述順に注意します。
（順序が異なっている場合は、動作が上書きされて正常に機能しない場合があります）

:link まだ訪問されていないリンク

「未訪問」のスタイルを定義できます。

a:link {
  color: forestgreen;
  text-decoration-color: hotpink;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:link

:visited ユーザーが訪問したことがあるリンク

お知らせなど既に読んでいる記事のURLリンクの色を変えたい、などのケースで、「訪問済み」のスタイルを定義できます。

a:visited {
  color: forestgreen;
  text-decoration-color: hotpink;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:visited

:hover カーソル（マウスポインター）を要素の上にかざしたとき

マウスカーソルがリンク要素上に存在する（クリックはしていない状態）のスタイルを定義できます。

.joinBtn {
  width: 10em;
  height: 5ex;
  background-color: gold;
  border: 2px solid firebrick;
  border-radius: 10px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}

.joinBtn:hover {
  background-color: bisque;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:hover

:active ボタンを押し下げたとき

クリック（スマホではタップ）直後のスタイルを定義できます。
ボタンを「押した感じ」のスタイルを定義しておくことで、リアルさを演出できます。

.joinBtn {
  width: 10em;
  height: 5ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.joinBtn:active {
  box-shadow: 2px 2px 5px #fc894d;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:active

transition トランジション 始点と終点の2点間アニメーション

トランジションは、2つの状態間でアニメーションできます。
例えば、.btn-a と、.btn-a:hover という2つのセレクタが定義されている場合は、マウスオーバーする前と、マウスオーバー時で、指定された秒数で徐々に変化するアニメーションを設定できます。

HTML

<section class="section">
    <h2>ボタンのマウスオーバー　＋トランジション</h2>
    <div class="btn-wrap">
        <a href="#" class="btn-a transition">ボタン</a>
    </div>
</section>

CSS

.btn-a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 10px;
    padding: 8px 16px;
    color: #ffffff;
    background-color: #1976d2;
}
.btn-a:hover {
    background-color: #1976d294;
    color: #1976d2;
}
.transition {
    transition: 1s; /*違いのあるプロパティを、1秒間アニメーション*/
}
トランジション

transition プロパティ

transition: 1s;

この記述内容は、一括記載の方法を使用しています。
秒数のみを指定すると、transition-durationを設定したことになります。

transition-duration: 1s;

以下は、記述方法は異なりますが、同じ内容となります。

/*一括指定*/
transition: background-color 1s ease-out 200ms;

/*個別指定*/
transition-property: background-color; /*アニメーションを適用するプロパティ。デフォルトはall*/
transition-duration: 1s; /*アニメーションの開始から終了までの時間*/
transition-timing-function: ease-out; /*アニメーションの速度やタイミング*/
transition-delay: 200ms; /*アニメーションの開始までの待ち時間*/
プロパティ意味指定できる値
transition-propertyアニメーションを適用するプロパティ・all (初期値) … 全てのプロパティに適用
・プロパティ名 … 複数指定のときはカンマ「,」で区切る
transition-durationアニメーションの開始から終了までの時間・数値s … 秒
・数値ms … ミリ秒
transition-timing-functionアニメーションの速度やタイミング・ease (初期値) … 開始時と終了時は緩やか
・linear … 一定の速度
・ease-in … 最初ゆっくり、だんだん早く
・ease-out … 最初速く、だんだんゆっくり
・ease-in-out … 開始時と終了時はかなり緩やか
・steps(数値) … ステップごと、パラパラ漫画風で使用
・cubic-bezier() … 変化をベジェ曲線で指定
transition-delayアニメーションの開始までの待ち時間・数値s … 秒
・数値ms … ミリ秒

keyframes キーフレーム 開始から終了までの複数地点で変化させる

キーフレームアニメーションでは、時間の経過に応じて複数のプロパティを設定できます。
時間の経過は、0%～100%の範囲で設定します。

以下の例では、bg-colorというクラス名に対して、アニメーションを設定してみましょう。

keyframe名は、「jinwari」にします。0%の時点の色と、100％の時点の色を設定しておきます。

HTML

<section class="section bg-color">
    <h2>ボタンのマウスオーバー　＋キーフレーム</h2>
    <div class="btn-wrap">
        <a href="#" class="btn-a transition">ボタン</a>
    </div>
</section>

CSS

@keyframes jinwari {
    0% {
        background-color: #a1c4e7;
    }

    100% {
        background-color: #97ee8f94;
    }
}

animation スタイルの間のアニメーションを適用…keyframe識別名と共に使用

前のセクションで作成したbg-colorクラスのCSSを作成しましょう。

CSS

.bg-color {
    background-color: #a1c4e7; /*初期設定*/
    animation: jinwari 5s ease-in-out infinite alternate; /*jinwariを使って、5秒の繰り返しアニメーション*/
}

ブラウザで確認

背景色を変化させる

animationのプロパティ

プロパティ意味指定できる値
animation-name@keyframesの識別名半角英字で設定された名前
animation-durationアニメーションの開始から終了までの時間・数値s … 秒
・数値ms … ミリ秒
animation-timing-functionアニメーションの速度やタイミング・ease (初期値) … 開始時と終了時は緩やか
・linear … 一定の速度
・ease-in … 最初ゆっくり、だんだん早く
・ease-out … 最初速く、だんだんゆっくり
・ease-in-out … 開始時と終了時はかなり緩やか
・steps(数値) … ステップごと、パラパラ漫画風で使用
・cubic-bezier() … 変化をベジェ曲線で指定
animation-delayアニメーションの開始までの待ち時間・数値s … 秒
・数値ms … ミリ秒
animation-iteration-count繰り返す回数・数値 … 繰り返す回数
・infinite … 無限ループ
animation-direction再生方向・normal (初期値) … 通常の方向
・reverse … 逆方向に再生
・alternate … 行って帰ってくる
animation-fill-mode再生前後の状態・none (初期値) … なし
・forwards … 再生後、最後のキーフレームの状態を保持
・backwards … 再生後、最初のキーフレームの状態を保持
・both … アニメーションの設定は実行前と実行後の両方に適用
animation-play-state再生と一時停止・running (初期値) … 再生中
・paused … 一時停止

要素の回転アニメーション

要素を回転させるには、rotateを使います。0から360度までの回転を、無限ループで設定してみましょう。

HTML

<section class="section">
    <h2>回転する要素</h2>
    <div class="box rotate-center"></div>
</section>

CSS : keyframes

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0); /*0度*/
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg); /*360度*/
            transform: rotate(360deg);
  }
}

CSS : animation

.rotate-center {
	        animation: rotate-center 3s linear both infinite;
}

ブラウザで確認

rotateで回転

横に流れるテキストアニメーション

テキスト画像をSVG形式で作成して、背景画像として設置したものを無限ループで横移動させます。

HTML

<section class="section">
    <h2>流れるテキスト（背景画像）</h2>
    <div class="telop-wrap">
        <div class="telop-text"></div>
    </div>
</section>

CSS : keyframes

@keyframes loop-slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -2080px 0; /*背景画像の横幅分、左側へ移動*/
    }
}

CSS : animation

.telop-wrap {
    display: flex;
    align-items: center;
    overflow: hidden; /*要素からはみ出した子要素は非表示*/
    height: 140px; /*背景画像の高さが収まるサイズ*/
}

.telop-text {
    background: url(../image/bg-text.svg) repeat-x; /*背景画像はx=横方向にリピート*/
    width: 100%;
    height: 140px;/*背景画像の高さが収まるサイズ*/
    animation: loop-slide 10s infinite linear both; /*10秒で無限ループ*/
}

ブラウザで確認

流れるテキスト

ジェネレーターを使ってカスタムしてみる

CSS Button Generator
https://front-end-tools.com/en/generateButton

ボタンを選んで、下にスクロールします。
右側でプロパティの値を変更できます。
左側のCSS、HTMLをコピーして利用できます。

CSSアニメーションの事例紹介

オーソドックスなボタンアニメーション

https://www.biwakokisen.co.jp

ページの下の方「イベント一覧へ」というボタンのマウスオーバーの動きの例です。

.btn01 a {
    background: #ffe220; /*背景色*/
    border: 1px solid #ffe220; /*線*/
    border-radius: 30px; /*角丸*/
    color: #265698; /*文字色*/
    display: block; /*ボックスタイプへ変更*/
    font-size: 1.6rem; /*フォントサイズ*/
    font-weight: 700; /*フォントウェイト*/
    padding: 15px 5px; /*内側の余白*/
    position: relative; /*相対配置*/
    text-align: center; /*文字の中央寄せ*/
    -webkit-transition: all .3s ease;
    transition: all .3s ease; /*2点間アニメーション*/
}
.btn01 a:hover {
    background: #fff; /*背景色の変更*/
    border: 1px solid #265698; /*線の色変更*/
}

CSSスプライトアニメーション

https://sourire-kawasaki.com/

左下の手書きイラストがユラユラしているアニメーションは、1秒間に6枚のイラストをコマ送り（パラパラ漫画のように）して動かしている。

HTML

中身がない要素をdivで設置。

<div class="side__illust"></div>

CSS

要素の大きさは、paddingとwidthで大きさを確保している。
画像を背景で設置し、y軸（translateの2つ目の値）を0%から-100%（before疑似要素の高さ分、上に移動）を6ステップ（→縦に6枚のイラストが描かれているから）を均等に、パラパラ風に動かしている。

.side__illust {
    overflow: hidden; /*要素からはみ出た子要素（＝before）は非表示*/
    transform: translate3d(0, 0, 0); /*初期値*/
}
.side__illust:before {
    content: '';
    display: block;
    background: url(../img/staff_sprite.png) no-repeat 0 0; /*背景で設定されたイラスト画像*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 900%; /*イラスト画像の高さ。1つのイラスト当たり150%の高さ*/
    animation: sprite-anime 1s steps(6) infinite;
    width: 100%; /*イラスト画像の横幅*/
    position: absolute;
    top: 0;
    left: 0;
}
.side__illust:after {
    content: '';
    display: block;
    padding-top: 150%; /*イラストの高さ保持用*/
}
@keyframes sprite-anime {
  0% {
    transform: translate(0, 0); /*アニメーションの開始時の位置*/
  }
  100% {
    transform: translate(0, -100%); /*アニメーションの終了時の位置、上に移動*/
  }
}
CSS
  • URLをコピーしました！

この記事を書いた人

トビサワのアバター トビサワ

デジタルハリウッド（専門スクール）講師、大学非常勤講師。
Webサイトのデザイン・コーディング・PHPやJavaScriptによるプログラミング、サーバー設定などのスキルを保有し、企業や事業主からの依頼によりサイト制作を行っている。
クライアントの希望によって会社案内やパンフレットのデザイン、動画制作案件も請けている。
SIer企業でのシステムエンジニアを十数年経験後、2011年よりフリーランスへ転向。

関連記事

目次