transition

시간의 흐름을 가지고 A CSS에서 B CSS로 변환되는 것

transition-property

전환 효과를 주는 속성

transition-duration

변환하는데 갖는 시간

0.5S = 500ms

만약, color만 2s에 걸쳐 전환하고 싶다면 transition-property에 all대신 color 값을 넣어주면 된다.

transition 값을 hover에 넣을 경우 마우스를 올릴때 전환되고 떼면 시간 적용이 안되고 바로 바뀌므로 hover아닌 원래 위치에 넣어야 한다.

transition-delay

transition될 속성이 transition 요청을 받은 이후 실제로 transition하기까지 기다려야하는 시간의 양을 지정합니다.

transition-timing-fuction

transition-delay에 적용된 시간에 따라 전환되기까지동안 어떻게 변할지 지정하는 것입니다.

   transition-timing-function: ease;

   transition-timing-function: ease-in;

   transition-timing-function: ease-out;

   transition-timing-function: ease-in-out;

   transition-timing-function: linear;

   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);

shorthand

초기값

transition-delay: 0s
transition-duration : 0s
transition-property : all
transition-timing-function: ease

순서가 중요하다.

/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;