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を表示します。

カラートラジション

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

標準ステートのボタンのCSSでは、背景プロパティは青に設定されます。このCSSルールのtransition-propertyは、あるアクションによりステートが変化すると、背景色プロパティが変わることを示しています。残りの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;
}

カラートラジション
カラートランジションを実行する

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

ボタンのボーダーおよびテキストのカラーが変わるように、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;
}

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

サイズトラジション

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

標準ステートのボタンのCSSでは、widthプロパティを400pxheightプロパティを100px、およびline-heightプロパティを60pxに設定します。このCSSルールのtransition-propertyでは、あるアクションによりステートが変化すると、widthheight、および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;
}

サイズトラジション
サイズトランジションの実行

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

ボタンの背景およびテキストのカラーが変わるように、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;
}


CSS(ホバー)

#button4:hover {
  background-color:#73746B;
  color: #f4f4f4;
}

背景およびテキストのカラーを変更する
背景およびテキストのカラーを変更する
ブラウザーでトランジションをプレビューする
ブラウザーでトランジションをプレビューする

ブラウザーでのプレビュー」をクリックしてブラウザーを選択し、トランジションを確認します。

ファイルを保存してから、変更結果を確認してください。

04/24/2018
このページは役に立ちましたか。