背景色や文字表示等をアニメーションするボタンの紹介。
CSS3のTransitionを使うことで簡単なアニメーションが出来ます。
右のサンプルは、ボタンにマウスを重ねると、背景色が2秒で黒→赤へ、文字サイズが1.5倍に、文字色が0.3秒で黄色→白にアニメーションする例示です。
1.ボタンのhtml
1 2 3 |
<div class="css_anima_1" style="float:right;"> <a name="button">Sample Button</a> </div> |
2.ボタンのcss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.css_anima_1{ width:200px; border:solid 1px #000; line-height:40px; text-align:center; font-weight:bold; } .css_anima_1 a{ background:#000; color:#ff0; font-size:1em; display:block; transition:background-color 2s, color 2.0s, font-size 0.3s; } .css_anima_1 a:hover{ background-color:#f00; color:#fff; font-size:1.5em; } |
transition のプロパティ
- プロパティ
- 値
- transition-property
- プロパティ名。複数の場合、半角カンマ(,)で区切る
- transition-duration
- 変化に掛かる時間を指定(初期値は0)。簡略化では時間指定が1つは、これが優先。
- transition-delay
- 変化が始まる時間を指定(初期値は0)
- transition-timing-function
- 変化のタイミング・進行割合を指定。難しくて今後の宿題。
・ background_color 2s:背景色を2秒で入替える。
・ color 2.0s:背景のテキスト文字色を2秒で入れ替える。
・ font-size 0.3s; テキストの文字サイズを0.3秒で入れ替える