CSS transition 속성이란? (feat. 애니메이션 부여)

CSS transition 속성이란?

아래 4개의 속성을 한번에 정의할 수 있는 약식 표기(shorthand property) 속성이다.

• transition-property: transition 이 적용될 CSS 속성을 정의
• transition-duration: transition 애니메이션이 얼마만큼의 시간을 거쳐 일어날지에 대한 속성을 정의
• transition-timing-function: transition 애니메이션이 어떠한 형태로 일어날지에 대한 속성을 정의
• transition-delay: 얼마만큼 기다렸다 transition 애니메이션이 일어날지 정의

예제

/* 필요한 만큼 속성을 이용하면 된다. */
/* property name | duration */
transition: margin-right 4s;

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

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

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

/* 2개의 속성에 적용하기 */
transition: margin-right 4s, color 1s;

/* 모든 속성에 적용하기 */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

레퍼런스

CSS Transition mdn web docs