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

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

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

//transition-duration     変化にかかる時間

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

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

<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: 3s;
	transition-timing-function: steps(3,end);  /* 3段階で色が変わる */
	background-color: #ba55d3;
	}
div.anime2 h4 {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	}