transition-timing-function

transition-timing-function 프로퍼티를 사용해 timing 함수를 만들면 시간에 따라 애니메이션 효과를 어떻게 분배할지를 설정할 수 있다. 애니메이션 효과가 초반엔 천천히 나타나다가 나중엔 빠르게 나타나게 할 수 있고, 물론 이 반대도 가능하다.

transition-timing-function 프로퍼티 값엔 베지어 곡선(bezier curve)이나 단계(step)가 올 수 있다.

베지어 곡선의 포인트

transition: width 3s cubic-bezier(0, 0, .5, 2), height 3s cubic-bezier(0, 0, .5, 2);

cubic-bezier(0, 0, .5, 2) // x2,y2 x3,y3
기본적으로 0,0 1,1 끝포인트는 정해져있고 (0번째 4번째 점)
내가 설정 할 수 있는 것은 2번째 3번째 점이다.

0초에서는 크기는 0, 0.5초에서는 크기가 2로 일반 크기 설정인 420px에서 벗어나게 되는 것이다.