アニメーションボタンを作成する

チュートリアル記事

初級

30 分

アニメーションボタンを作成する

CSSを使用して、アニメーションエフェクトをページのボタンに追加する方法を説明します。

CSSのtransitionプロパティは、シンプルながらも洗練されたアニメーションエフェクトをページに追加できます。ページのユーザーエクスペリエンスを向上させる方法の1つは、ユーザーがサイトナビゲーションをおこなうときにシンプルなアニメーションをフィードバックとして提供することです。一般的なエフェクトとして、ボタンまたはそのテキストのカラー、ボーダー、およびサイズの変更があります。このチュートリアルでは、CSSのtransitionプロパティを操作します。手順に沿って作業を進めるには、プロジェクトファイルをダウンロードして、コード全体を表示してください。

必要な情報

サンプルファイルをダウンロード

このチュートリアルでは、CSSトランジション活用法の一部のみ扱っています。プロジェクトファイルをダウンロードして、実際にお試しください。

トランジションの仕組み

CSSでのオブジェクト（ボタンなど）のトランジションエフェクトには2つの異なるスタイルが必要です。1つは標準ステートのボタンのスタイル設定で、もう1つはホバーステート（ユーザーがマウスポインターを合わせたとき）のボタンのスタイル設定です。

この例では、標準ステートのボタンのスタイルはCSSのIDセレクターで定義されています（#button1 ）。ホバーステートのボタンのスタイルは、同じボタンの疑似セレクターで定義されています（#button1:hover ）。疑似セレクターは、ユーザーが選択したときやマウスポインターを合わせたときなど、特定のステートの要素のスタイルを定義します。

この場合、背景色は青から赤に変わります。トランジションをカスタマイズするために、次の4つのtransitionプロパティを組み込みます。

transition-property： 変更するCSSプロパティを指定します（background ）
transition-duration： トランジションにかかる期間を指定します（0.3s ）
transition-timing-function： トランジションエフェクトの速さを徐々に変えるかどうかを指定します（ease ）
transition-delay： トランジションが開始するまでの時間を指定します（0s ）

始める前に

Dreamweaverでcreate-animated-website-buttons.html を開き、「分割」ビューでstyle.css を表示します。

1

カラートラジション

ユーザーが１つ目のボタンにマウスポインターを合わせたときに背景色が青から赤に変わるように、下のようにCSSのスタイルを設定します。

標準ステートのボタンのCSSでは、背景色を指定するbackground プロパティは青に設定されます。このCSSルールのtransition-property は、あるアクションによりステートが変化すると、background プロパティが変わることを示しています。残りのtransitionプロパティは、変化の速さと滑らかさを決定します。

transition-timing-function: ease; は、エフェクトをゆっくり開始し、速度を上げた後、ゆっくり終了します。

疑似セレクターは、ユーザーがマウスポインターを合わせてステートがホバー に変わると、ボタンの背景色を赤に変えることを指定しています。

CSS（標準）

#button1 {
...
background:#ADD7F4;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}

CSS（ホバー）

#button1:hover {
background:#EA575B;
}

2

ボーダーおよびテキストのカラートラジション

2つ目のボタンのボーダーおよびテキストのカラーが変わるように、CSSのスタイルを下のように設定します。

標準ステートのボタンのCSSでは、border-color プロパティは明るい青色に設定され、テキストのcolor プロパティは純白に近い色に設定されます。このCSSルールのtransition-property では、あるアクションによりステートが変化すると、border-color プロパティとテキストのcolor プロパティが変わることを示しています。残りのtransitionプロパティは、変化の速さと滑らかさを決定します。

transition-timing-function: linear; は、エフェクトを最初から最後まで同じスピードに保ちます。

ユーザーがマウスポインターを合わせてステートがホバー に変わると、ボタンのボーダー とテキストの色を濃青色に変えることを指定しています。

CSS（標準）

#button2 {
...
border-color: #7A97B2;
color: #f4f4f4;
transition-property: border-color, color;
transition-duration: 0.1s;
transition-timing-function: linear;
transition-delay: 0;
}

CSS（ホバー）

button2:hover {
border-color: #204F81;
color: #183B61;
}

3

サイズトラジション

３つ目のボタンのサイズが変わるように、CSSのスタイルを下のように設定します。

標準ステートのボタンのCSSでは、width プロパティを400px 、height プロパティを100px 、およびline-height プロパティを60px に設定します。このCSSルールのtransition-property では、あるアクションによりステートが変化すると、width 、height 、およびline-height プロパティが変わることを示しています。

ユーザーがマウスポインターを合わせてステートがホバー に変わると、ボタンの幅、高さ、および行高の値を大きくして、ボタンが大きくなるように指定しています。

CSS（標準）

#button3 {
...
width: 400px;
height: 100px;
line-height: 60px;
transition-property:
width, height, line-height;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}

CSS（ホバー）

#button3:hover {
width: 420px;
height: 120px;
line-height: 80px;
}

4

背景およびテキストのカラーを変更する

４つ目のボタンの背景およびテキストのカラーが変わるように、CSSのスタイルを下のように設定します。

標準ステートのボタンのCSSでは、background-color プロパティは純白に近い色に設定され、テキストのcolor プロパティはグレーに設定されます。このCSSルールのtransition-property では、あるアクションによりステートが変化すると、background-color プロパティとテキストのcolor プロパティが変わることを示しています。

ユーザーがマウスポインターを合わせてステートがホバー に変わると、ボタンのbackground-color プロパティとテキストのcolor プロパティを入れ替えることを指定しています。

CSS（標準）

#button4 {
background-color:#f4f4f4;
color: #73746B;
transition-property:
background-color, color;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0;
}