타쿠꺼

div가 중앙에서부터 확장되는 애니메이션 메커니즘을 보자면,일반적으로 div의 height를 0에서 양의 수로 transition을 시키면 위에서 아래로 커지거나, 아래에서 위로 커진다.이 때 div의 위치를 함께 이동시키면 중앙에서 커지는 것처럼 보이게 할 수 있다.

MY BOTTLE 폰트http://software.naver.com/software/summary.nhn?softwareId=MFS_114889

https://msdn.microsoft.com/ko-kr/library/hh924823(v=vs.85).aspx https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

해결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)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.