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;
}

複数指定指定

#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;
}

画像の切り替え

サンプル画像1 サンプル画像1
Copyright © 2010 CSS Lecture All rights reserved.