CSS에서 transition과 animation은 모두 애니메이션을 만들기 위한 속성들이지만, 각각의 목적과 사용 방식에 있어서 다소 차이가 있습니다.
Transition (트랜지션)
목적: 요소의 상태 변화를 부드럽게 처리하는 것이 주된 목적입니다. 주로 상호작용에 반응하여 요소의 상태가 변경될 때 효과적으로 사용됩니다.
주요 속성:
- transition-property: 어떤 CSS 속성에 트랜지션을 적용할지 지정합니다.
- transition-duration: 트랜지션이 일어나는 시간을 설정합니다.
- transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.
- transition-delay: 트랜지션이 시작하기 전에 기다리는 시간을 설정합니다.
사용 예시:
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 0.3s ease-in-out;
}
.box:hover {
width: 200px;
}특징:
- 트랜지션은 요소의 특정 CSS 속성 값이 변경될 때, 그 변경을 자연스럽게 만들어 줍니다.
- 주로 hover, focus, active 등의 상호작용에서 요소의 크기, 색상 등이 부드럽게 변화할 때 유용하게 사용됩니다.
반응형
Animation (애니메이션)
목적: 더 복잡하고 다양한 애니메이션 효과를 구현하는 것이 주된 목적입니다. 요소에 다양한 동작과 변화를 부여할 수 있습니다.
주요 속성:
- @keyframes: 애니메이션의 중간 상태를 정의합니다.
- animation-name: 사용할 애니메이션의 이름을 지정합니다.
- animation-duration: 애니메이션이 진행되는 시간을 설정합니다.
- animation-timing-function: 애니메이션의 속도 곡선을 정의합니다.
- animation-delay: 애니메이션이 시작하기 전에 기다리는 시간을 설정합니다.
- animation-iteration-count: 애니메이션이 반복되는 횟수를 지정합니다.
- animation-direction: 애니메이션이 재생되는 방향을 설정합니다.
사용 예시:
@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: slidein 1s ease-in-out;
}특징:
- 애니메이션은 @keyframes 규칙을 사용하여 시작부터 끝까지 다양한 중간 상태를 정의할 수 있습니다.
- 루프로 반복되거나, 특정 조건에 따라 일시정지하거나, 반대 방향으로 재생되는 등의 제어가 가능합니다.
- 더 복잡한 애니메이션 효과를 구현할 수 있지만, 단순한 hover 효과와 같은 간단한 상호작용에는 비효율적일 수 있습니다.
요약
- Transition: 단순한 상태 변화에 대해 부드러운 애니메이션을 추가할 때 유용합니다.
- Animation: 더 복잡하고 제어가 필요한 애니메이션을 구현할 때 유용하며, 중간 상태를 세밀하게 정의할 수 있습니다.
각각의 사용 목적에 따라 transition과 animation을 적절히 선택하여 웹 페이지나 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.
728x90
