CSS Transitions
✅ CSS 전환(Transitions) 개요
웹사이트가 표시된 후 요소의 시각적 모습은 여러 이유로 변경될 수 있다. 예를 들어,
- 링크 위에 마우스를 올렸을 때 색상이나 모양이 바뀜
- 창 크기를 조절했을 때 레이아웃이 변경됨
- 스크롤 시 일부 요소가 사라지고 다른 요소가 나타남
이러한 변화는 상태 변화(State Change) 이며, CSS Transition을 사용하면 이러한 변화가 부드럽게 진행되도록 제어할 수 있다.
✅ Transition으로 제어할 수 있는 요소
- 어떤 CSS 속성을 전환할지 (transition-property)
- 전환이 지속되는 시간 (transition-duration)
- 전환이 시작되기 전 대기 시간 (transition-delay)
- 전환의 가속도 곡선 (transition-timing-function)
✅ 특징
- 요소의 시각적 상태 변화가 갑작스럽지 않고 자연스럽게 보이도록 함
- 마우스 이벤트, 화면 크기 변경, 스크롤 등 다양한 상황에서 활용 가능
- 네 가지 속성을 조합해 원하는 애니메이션 효과 구현 가능
Duration
✅ CSS Transition 기본 사용법 :
간단한 전환 효과를 만들기 위해서는 두 가지 속성을 반드시 지정해야 한다.
- transition-property : 어떤 CSS 속성에 전환 효과를 적용할지
- transition-duration : 전환이 얼마 동안 지속될지
✅ 예시 코드 :
a {
transition-property: color;
transition-duration: 1s;
}- transition-property: color; → 텍스트 색상에 전환 효과를 적용
- transition-duration: 1s; → 전환이 1초 동안 진행
✅ 전환 가능한 속성의 예 :
- 색상(Color) : color, background-color → 기존 색상에서 새로운 색상으로 부드럽게 변화
- 길이(Length) : font-size, width, height → 값에 따라 크기가 커지거나 작아짐
✅ 전환 시간(Duration) :
- 단위 : s(초), ms(밀리초)
- 기본값 : 0s → 즉시 변화 (전환 없음과 동일)
- 예시: 3s, 0.75s, 500ms
전환 시간을 설정할 때는 현실적인 동작 속도를 참고하는 것이 좋다.
예를 들어, 사람의 눈 깜빡임은 약 400ms 걸리므로, 버튼 클릭 같은 애니메이션은 이 정도 속도가 자연스럽게 느껴진다.
Timing Function
✅ Transition Timing Function :
transition-timing-function 속성은 전환 효과가 시간에 따라 어떤 속도로 변화할지를 결정하는 속성이다.
✅ 기본값 :
ease : 천천히 시작 → 중간에 빠르게 → 끝날 때 다시 천천히
✅ 주요 값들 :
| 값 | 설명 |
| ease-in | 시작은 느리게 → 점점 빨라짐 → 갑자기 끝남 |
| ease-out | 빠르게 시작 → 점점 느려짐 → 부드럽게 종료 |
| ease-in-out | 천천히 시작 → 중간에 빠르게 → 천천히 끝남 |
| linear | 시작부터 끝까지 동일한 속도 |
✅ 예시 코드 :
a {
transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-out;
}- color 속성이 1초 동안 전환됨
- ease-out → 처음은 갑자기 시작하고, 끝날수록 느려지며 마무리
Delay
✅ Transition Delay :
transition-delay 속성은 전환 효과가 시작되기 전 대기 시간을 지정하는 속성이다.
✅ 특징 :
- 값은 시간 단위(초 s, 밀리초 ms)로 설정
- 기본값은 0s → 즉시 전환 시작
- 양수 값 → 지정한 시간만큼 기다린 후 시작
- 음수 값 → 애니메이션이 중간 시점부터 시작되는 효과
✅ 예시 코드 :
.box {
transition-property: width;
transition-duration: 750ms;
transition-delay: 250ms;
}- width 속성이 변화할 때
- 250ms 후에 전환 시작
- 시작 후 750ms 동안 전환이 진행됨
Shorthand
✅ CSS Transition Shorthand :
CSS에서 전환(transition) 관련 속성을 여러 줄로 작성하다 보면 코드가 길어질 수 있다.
이를 간단하게 정리할 수 있도록 제공되는 속성이 transition이다.
✅ 예시 코드 :
/* 개별 속성 예시 */
.element {
transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;
}
/* Shorthand 예시 */
.element {
transition: color 1.5s linear 0.5s;
}
✅ 작성 순서 :
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
주의 : 두 개의 시간 값(duration, delay)은 반드시 이 순서를 지켜야 함.
- 첫 번째 시간값 → duration
- 두 번째 시간값 → delay
✅ 특징 :
- 빠짐없이 네 가지 속성을 쓸 수도 있고, 일부만 작성하면 나머지는 기본값이 적용됨
- 단, delay를 쓰고 싶다면 반드시 duration도 같이 명시해야 함
Combinations
✅ 여러 속성에 대한 Transition 결합 :
transition 속성의 큰 장점 중 하나는 여러 속성의 전환을 동시에 정의할 수 있다는 점이다.
이를 위해 속성들을 쉼표(,) 로 구분하여 나열한다.
✅ 예시 코드 :
.element {
transition: color 1s linear,
font-size 750ms ease-in 100ms;
}- color
- 1초 동안, linear 속도로, 지연 없이 실행
- font-size
- 750ms 동안, ease-in 속도로, 100ms 지연 후 실행
✅ 특징 :
- 쉼표(,)로 구분하여 원하는 만큼 속성을 나열 가능
- 각각의 속성은 독립적으로 다른 duration, timing-function, delay를 가질 수 있음
- 복잡한 애니메이션을 간결하게 표현할 수 있음
All
✅ 모든 속성에 Transition 적용하기 (all) :
여러 속성에 동일한 전환 효과를 주고 싶을 때는 transition-property: all 값을 사용하면 된다.
이 경우 변경되는 모든 속성이 같은 방식으로 애니메이션된다.
✅ 예시 코드 :
.element {
transition: all 1.5s linear 0.5s;
}- all → 모든 속성에 동일한 전환 적용
- 1.5s → 전환 시간
- linear → 일정한 속도
- 0.5s → 지연 후 시작
즉, 해당 요소의 속성 중 어떤 것이든 변경되면, 0.5초 후 1.5초 동안 선형 속도로 애니메이션이 실행된다.
✅ 장점 :
- 코드가 짧아지고 간결해짐
- 여러 속성을 한꺼번에 제어 가능
✅ 주의점 :
- 성능 저하 가능 → 불필요하게 모든 속성을 애니메이션 처리
- 의도치 않은 속성까지 전환되어 UI에 혼란 발생 가능
참고
https://www.codecademy.com/enrolled/courses/learn-intermediate-css