*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
簡単なアニメーション Transition MENU 

背景色や文字表示等をアニメーションするボタンの紹介。

CSS3のTransitionを使うことで簡単なアニメーションが出来ます。

右のサンプルは、ボタンにマウスを重ねると、背景色が2秒で黒→赤へ、文字サイズが1.5倍に、文字色が0.3秒で黄色→白にアニメーションする例示です。

1.ボタンのhtml

2.ボタンのcss

  • 行番
  • 説 明
  • 13
  • アニメーション設定の簡略型。「プロパティ」と「値」(宣言)を半角スペースで区切り、複数の宣言を「,」で区切る
    ・ background_color 2s:背景色を2秒で入替える。
    ・ color 2.0s:背景のテキスト文字色を2秒で入れ替える。
    ・ font-size 0.3s; テキストの文字サイズを0.3秒で入れ替える
  • 15-18
  • ボタンにマウスを重ねた時にアニメーションするボタンの「プロパティ」と「値」を記述

transition のプロパティ

  • プロパティ
  • transition-property
  • プロパティ名。複数の場合、半角カンマ(,)で区切る
  • transition-duration
  • 変化に掛かる時間を指定(初期値は0)。簡略化では時間指定が1つは、これが優先。
  • transition-delay
  • 変化が始まる時間を指定(初期値は0)
  • transition-timing-function
  • 変化のタイミング・進行割合を指定。難しくて今後の宿題。