CSS3 アニメーション（Transitions）のデモページ
transition-timing-functio の違い
default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »
背景色を変更する
#demo2 {
background-color: #39C;
-webkit-transition: background-color 1s linear;
}
#demo2:hover {
background-color: #09F;
}
background-color: #39C;
-webkit-transition: background-color 1s linear;
}
#demo2:hover {
background-color: #09F;
}
複数指定指定
#demo3 {
background-color: #39C;
-webkit-transition: background-color 1s linear, color 1s linear, border-color 1s linear;
}
#demo3:hover {
background-color: #990;
color: #FFF;
border-color: #C30;
}
background-color: #39C;
-webkit-transition: background-color 1s linear, color 1s linear, border-color 1s linear;
}
#demo3:hover {
background-color: #990;
color: #FFF;
border-color: #C30;
}
画像の切り替え
