[●]중앙으로부터 확장하는 div애니메이션

해결1

div의 top 위치를 함께 transition 시킨다.

div {

position: absolute;

top: 0px;

width: 100px;

height: 0px;

transition: all .5s;

}

div:hover {

top: -50px;

height: 100px;

}

div의 top이 위로 올라가면서 height의 크기가 커지기 때문에 가운데서 확장되는 효과를 볼 수 있다.

해결2

사실 top, left 등을 변화시키는건 시스템에 무리를 준다.

transform을 사용하면 된다. transform은 기준 앵커값이 요소의 중앙이므로, scale(0) -> scale(1)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.