ホバーで変形するアニメーション


transition-property
	all	                変化を適用できるプロパティすべてが変化する(初期値)
	none	            どのプロパティも変化しない
	プロパティ名         変化させるプロパティ名のリストをカンマ( , )区切りで指定

transition-duration     変化にかかる時間

transition-timing-function
	ease           開始付近と終了付近の動きを滑らかに
	linear         直線的に変化
	ease-in        開始付近の動きを緩やかに
	ease-out       終了付近の動きを緩やかに
	ease-in-out    開始付近と終了付近の動きを緩やかに

Transitionの効果

色、形が変わる例


■transition無し
.trans {
	width: 200px;
	height: 200px;
	background-color: red;
	margin: 1rem;
	}
.trans:hover {
	border-radius: 50%;
	background-color: blue;
	}

色、形が変わる例


■transitionあり
.trans {
	width: 200px;
	height: 200px;
	background-color: red;
	margin: 1rem;
	transition: .3s;
	}
.trans:hover {
	border-radius: 50%;
	background-color: blue;
	}

スマホの場合はホバーではなくてクリックで変化する。

transitionの使用例

この使い方は間違ってる気がするけど… (''◇'')ゞ

<div class="anime"><h4>transitionの使用例</h4></div>


div.anime {
	background-color:#00f;
	color: #fff;
	width: 25rem;
	height: 5em;
	margin: 0 0 5rem;
	padding: 0 1rem;
	transition-property: background-color, width, height;
	transition-duration:1s;
	transition-timing-function: ease-in-out;
	overflow: hidden;
	}
div.anime:hover {
	background-color: #97e67b;
	width: 40rem;
	height: 8em; 
	}
div.anime h4 {
	font-size: 1.5em;
	margin: .5em auto 3rem;
	padding: 1rem;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 767.9px) {
	div.anime:hover {
		width: 100%;
		}
	}

transitionの使用例2


<div class="anime2"><h4>transitionの使用例2</h4></div>


.anime2{
	background-color: #20d3d0;  /* 開始色 */
	color: #fff;
	width:250px;
	height: 60px;
	padding: 1rem;
	}
.anime2:hover{
	transition-property: background-color;
	transition-duration: 5s;
	transition-timing-function: steps(5,end);  /* 5段階で色が変わる。中間の色は自動で表示する。 */
	background-color: #ba55d3;  /* 終了色 */
	}
div.anime2 h4 {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	}

TOP