[ CSS ] transition 애니메이션 효과

#m{
  width:100px;
  height:100px;
  background:red;
	position: relative;
  transition:height 5s;
}
#m:hover{
  height:300px;
  background:blue;
}

<div id="m"></div>

* 가로(width)와 세로(height) 중 한쪽방향으로만 transition 적용 가능.

 

[ 참고 ]

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1