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

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

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

/* 色、幅、高さが変わる */
/* ============================================ */
div.anime {
	background-color:#00f;
	color: #fff;
	width:250px;
	height: 60px;
	margin-bottom: 5rem;
	padding: 1rem;

	transition-property: background-color, width, height;
	transition-duration:1s;
	transition-timing-function: ease-in-out;
	}
div.anime:hover {
	background-color: #97e67b;
	width: 400px;
	height: 100px; 
	}

div.anime h4,
div.anime2 h4 {
	margin: 0;
	padding: 0;
	}

/* 3段階で色が変わる */
/* ============================================ */
.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);
	background-color: #007f92;
	}


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

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

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