css3の勉強～その14～transition

マウスオーバーなどで簡単なアニメーションを実現する

transition-timing-function
-ease-　　　　開始と終了がゆっくり
-linear-　　　等速度
-dase-in-　　　開始がゆっくり
-dase-out-　　終了がゆっくり
-ease-in-out- 開始と終了がゆっくり

マウスオーバーでなめらかに四角の大きさと色が変わるようにする。
これは検索ボックスやメニューで使われている。

<div></div>

div{
width:100px;
height:50px;
background:skyblue;

transition-property:all;変化の対象
transition-duration:2s;変化の時間
transition-timing-function:ease;
transition-delay:0.8s;開始までの時間
}

div:hover {
width:200px;大きさが変わる
height:50px;
background:blue;色が変わる
}

div{
width:100px;
height:50px;
background:skyblue;

transition:all 2s ease 0.8s; 一つにまとめて書くこともできる
}