transition

transition:変化させるプロパティ名,秒数,タイミング,ディレイ;

transition-property、transition-duration、transition-timing-function、transition-delayが短縮された形。

プロパティの初期値はall、変化の初期値はease、タイミングの初期値は0

カンマで区切らず半角スペースで指定可能。

小数の0.3は、.3でもOK

transition:width 1s linear 0s;

/*css*/
#red {
	background:red;
	transition:width 1s linear 0s;
	}
#red:hover {
	width:20%;
	}

幅が一定の早さで変化

transition:background 1s linear 0s;

/*css*/
#blue {
	background:blue;
	transition:background 1s linear 0s;
	}
#blue:hover {
	background:#eee;
	}

背景色が一定の早さで変化

transition:width 1s ease 0s;

/*css*/
#green {
	background:green;
	transition:width 1s ease 0s;
	}
#green:hover {
	width:60%;
	}

開始と完了が滑らかに（初期値）

transition:width 1s ease-in 0s;

/*css*/
#yellow {
	background:yellow;
	transition:width 1s ease-in 0s;
	}
#yellow:hover {
	width:60%;
	}

開始が滑らかに

transition:width 1s ease-out 0s;

/*css*/
#black {
	background:black;
	transition:width 1s ease-out 0s;
	}
#black:hover {
	width:60%;
	}

完了が滑らかに

transition:width 1s ease-out .8s;

/*css*/
#black {
	background:black;
	transition:width 1s ease-out 0s;
	}
#black:hover {
	width:60%;
	}

完了が滑らかに

transition:width 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) 0s;

/*css*/
#purple {
	background:purple;
	transition:width 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) 0s;
	}
#purple:hover {
	width:60%;
	}

linearを指定したのと同じ

transition:all 0.5s;

/*css*/
#m1 {
	background:#44f;
	transition:all .5s;
	}
#m1:hover {
	background:#aaf;
	}

linearを指定したのと同じ

サンプル例

ボタン切り替え１

box-shadowはカンマで連続して記述すると２つのシャドウを指定することができる。transition-durationに上書きする.1sは、box-shadowとtransform両方に対して適用される。１つずつ別々に指定するなら.1s,.3sのようにカンマ区切りで指定。

/*css*/
#m2 a {
	display:block;
	cursor:pointer;
	width:150px;
	box-shadow: 0 6px 0 #f88, 0 12px 0 rgba(0,0,0,0.2);
	transition:box-shadow .3s,transform .3s;
	-webkit-transition:box-shadow .3s,transform .3s;
	}
#m2 img {
	vertical-align:bottom;
	}
#m2 a:hover {
	box-shadow: 0 3px 0 #12978d, 0 6px 0px rgba(0,0,0,0.2);
	-webkit-transform:translateY(3px);
	transform:translateY(3px);
	}
#m2 a:active {
	box-shadow: 0 0 0 #f55, 0 0 0px rgba(0,0,0,0.2);
	-webkit-transform:translateY(6px);
	transform:translateY(6px);
	transition-duration:.1s;
	}

画像回転

/*css*/

• 

  題名

  内容

• 

  Placehold.it

  この画像は「Placehold.it」で生成されるダミー画像を使用しています。

  Placehold.it

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>