CSS transition

CSS transition 속성은 CSS 속성이 변경될 때 변화를 부드럽게 만들어주는 애니메이션 효과를 제공하는 속성

transition: property duration timing-function delay;

• property: 변화를 부드럽게 만들 CSS 속성을 지정합니다. 여러 속성을 지정할 경우 쉼표로 구분합니다.
• duration: 변화가 일어날 시간을 지정합니다. 단위는 초 또는 밀리초(ms)를 사용합니다.
• timing-function: 애니메이션의 속도 곡선을 지정합니다. linear, ease, ease-in, ease-out, ease-in-out 등의 값을 사용할 수 있습니다.
• delay: 변화가 일어날 때까지 대기할 시간을 지정합니다. 단위는 초 또는 밀리초(ms)를 사용합니다.

위처럼 한줄로 작성하는게 좋다

CSS transition 속성의 프로퍼티들은 다음과 같습니다:

1. transition-property: 변화를 부드럽게 만들 CSS 속성을 지정합니다. 여러 속성을 지정할 경우 쉼표로 구분합니다.

/* 하나의 속성만 지정 */
transition-property: background-color;

/* 여러 속성 지정 */
transition-property: background-color, color, opacity;

2. transition-duration: 변화가 일어날 시간을 지정합니다. 단위는 초 또는 밀리초(ms)를 사용합니다.

transition-duration: 1s; /* 1초 */
transition-duration: 500ms; /* 500밀리초 */

3. transition-timing-function: 애니메이션의 속도 곡선을 지정합니다. linear, ease, ease-in, ease-out, ease-in-out 등의 값을 사용할 수 있습니다.

transition-timing-function: ease;

4. transition-delay: 변화가 일어날 때까지 대기할 시간을 지정합니다. 단위는 초 또는 밀리초(ms)를 사용합니다.

transition-delay: 0.5s; /* 0.5초 */