• 목록

transition 속성은 요소의 스타일 변경을 부드럽게 애니메이션하는 데 사용됩니다.
transition 속성을 구성하는 모든 속성과 가능한 값들을 정리해 보겠습니다.

🎯 1. transition 속성의 구성 요소
transition 속성은 다음 4가지 속성의 단축형입니다.
속성 설명 예제
transition-property 애니메이션할 CSS 속성 background-color, width, opacity, all 등
transition-duration 전환 지속 시간 0.5s, 200ms 등
transition-timing-function 애니메이션 속도 곡선 ease, linear, ease-in-out 등
transition-delay 전환 시작 지연 시간 0s, 300ms 등

✅ 단축 속성 사용법[code]/* 특정 속성만 애니메이션 적용 */
transition: background-color 0.3s ease-in-out 0.1s;

/* 여러 속성에 개별 지속 시간 적용 */
transition: width 0.5s ease, height 0.3s linear;

/* 모든 속성에 적용 */
transition: all 0.4s ease-in-out;[/code]
🎯 2. 개별 transition 속성 설명

① transition-property (변화할 속성 지정)
어떤 CSS 속성을 애니메이션할지 지정합니다.
all 모든 속성에 전환 효과 적용 (기본값)
특정 속성 background-color, width, height, transform, opacity 등 특정 속성만 적용
none 전환 효과 없음
예제[code]transition-property: background-color;  /* 배경색만 전환 */
transition-property: width, height;  /* 너비와 높이만 전환 */[/code]
② transition-duration (전환 지속 시간)
전환 효과가 지속되는 시간을 설정합니다.
단위는 초(s) 또는 **밀리초(ms)**를 사용합니다.
0s 즉시 변경 (애니메이션 없음)
0.5s 0.5초 동안 전환
200ms 200밀리초 동안 전환
예제[code]transition-duration: 0.5s;  /* 0.5초 동안 전환 */
transition-duration: 200ms, 1s;  /* 첫 번째 속성은 200ms, 두 번째 속성은 1초 */[/code]
③ transition-timing-function (애니메이션 가속 곡선)
애니메이션 속도를 제어하는 방법입니다.
ease 천천히 시작 → 빠름 → 천천히 끝남 (기본값)
linear 일정한 속도로 진행
ease-in 천천히 시작하고 점점 빨라짐
ease-out 빠르게 시작하고 점점 느려짐
ease-in-out 천천히 시작 → 빠름 → 천천히 끝남
cubic-bezier(x, y, x2, y2) 사용자 지정 가속 곡선
예제[code]transition-timing-function: ease-in-out;  /* 부드럽게 시작하고 끝남 */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);  /* 직접 지정 */[/code]
④ transition-delay (전환 시작 지연 시간)
전환 효과가 시작되기까지의 지연 시간을 설정합니다.
단위는 s(초) 또는 ms(밀리초)를 사용합니다.
0s 즉시 시작
1s 1초 후에 시작
500ms 0.5초 후에 시작
예제[code]transition-delay: 0.3s;  /* 0.3초 후 시작 */
transition-delay: 0s, 1s;  /* 첫 번째 속성은 즉시 시작, 두 번째 속성은 1초 후 시작 */[/code]
🎯 3. transition 전체 예제[code]div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease-in-out 0.2s, background-color 0.3s linear;
}

div:hover {
  width: 200px;
  background-color: red;
}[/code]✅ 마우스를 올리면 배경색은 즉시 변화(0.3초), 너비는 0.2초 후 0.5초 동안 변화합니다.

🎯 4. transition 관련 추가 정보
🎈 여러 개의 속성 전환하기
여러 속성을 개별적으로 지정할 수 있습니다.[code]transition: width 0.4s ease, height 0.6s linear, opacity 0.5s ease-in-out;[/code]
🎈 hover와 함께 사용하기[code]button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  background-color: red;
  color: yellow;
}[/code]✅ 마우스를 올리면 배경색과 글자색이 0.3초 동안 부드럽게 변화합니다.

🎯 5. transition vs animation 차이
이벤트 필요 여부 사용자 이벤트(hover, focus 등) 필요 자동 실행 가능
반복 가능 여부 한 번 실행 반복 가능 (infinite)
키프레임 사용 여부 없음 @keyframes 사용 가능
사용 예제 hover 시 색상 변경 무한 반복하는 로딩 애니메이션
📌 예제 비교[code]/* transition 예제 */
.box {
  width: 100px;
  transition: width 0.5s;
}
.box:hover {
  width: 200px;
}

/* animation 예제 */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.box {
  animation: move 2s infinite alternate;
}[/code]
🎯 6. transition: background 0.2s;
설명: background 속성에 대해 0.2초 동안 부드러운 전환 효과를 적용합니다.
기본 값: ease (즉, 속도 변화가 부드럽게 시작되고 끝나는 기본 효과 적용)
예제:[code]div {
  background-color: blue;
  transition: background 0.2s;
}

div:hover {
  background-color: red;
}[/code]마우스를 올리면(:hover) 배경색이 0.2초 동안 부드럽게 변화합니다.

🎯 7. transition: all 0.25s ease-in-out;
설명: 모든 속성(all)에 대해 0.25초 동안 ease-in-out 타이밍 함수로 전환 효과 적용
ease-in-out: 처음과 끝이 부드럽게 변화하는 효과
예제:[code]div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.25s ease-in-out;
}

div:hover {
  width: 150px;
  height: 150px;
  background-color: red;
}[/code]마우스를 올리면 크기(width, height)와 배경색이 0.25초 동안 부드럽게 변화합니다.
차이점 비교[code]
속성             background 0.2s             all 0.25s ease-in-out
적용 대상     background(배경색)만       모든 속성 (all)
지속 시간     0.2초                               0.25초
타이밍 함수   기본값(ease)                   ease-in-out(처음과 끝이 부드러움)[/code]background 0.2s; → 배경색만 전환
all 0.25s ease-in-out; → 크기, 위치, 색상 등 모든 속성에 적용됨

💡 결론:
배경색만 전환하려면 background 0.2s;
모든 속성을 자연스럽게 변화시키려면 all 0.25s ease-in-out;

🎯 8. 정리
transition-property 애니메이션할 속성 all, background-color, width 등
transition-duration 지속 시간 0.5s, 200ms
transition-timing-function 속도 곡선 ease, linear, ease-in-out 등
transition-delay 시작 지연 시간 0s, 300ms
📌 transition을 사용할 때, 단축 속성을 활용하면 간결하고 쉽게 적용할 수 있음![code]transition: all 0.5s ease-in-out 0.2s;[/code]