CSS의 transition 속성은 웹 요소의 스타일 변화를 부드럽게 만들어주는 강력한 도구입니다. 예를 들어, 버튼에 마우스를 올렸을 때 색상이 서서히 변하거나, 크기가 자연스럽게 커지는 효과를 줄 수 있습니다.
1. CSS Transition의 기본 구조
transition 속성은 요소의 스타일 변화를 부드럽게 전환(transition)하도록 설정합니다. 이 속성은 다음과 같은 4가지 주요 속성으로 구성됩니다:
- transition-property: 어떤 CSS 속성을 전환할지 지정합니다. (예: width, opacity, background-color 등)
- transition-duration: 전환 효과가 얼마나 오래 지속될지 시간을 지정합니다. (예: 2s = 2초)
- transition-timing-function: 전환 속도의 패턴(가속/감속)을 설정합니다. (예: ease, linear 등)
- transition-delay: 전환 효과가 시작되기 전 대기 시간을 설정합니다. (예: 1s = 1초 대기)
이 4가지 속성을 한 번에 설정할 수도 있습니다. 예를 들어:
transition: width 2s ease 1s;2. Transition 속성 하나씩 살펴보기
(1) transition-property와 transition-duration
먼저, transition-property는 어떤 속성을 부드럽게 변화시킬지 정합니다. transition-duration은 그 변화가 얼마나 오래 걸릴지 설정하죠.
실습 예제 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: #FF6347;
/* 토마토 색상 */
transition-property: width;
/* width 속성에 전환 효과 적용 */
transition-duration: 1.5s;
/* 1.5초 동안 변화 */
}
.box:hover {
width: 200px;
/* 마우스를 올리면 가로 크기가 200px로 변경 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>(2) transition-timing-function: 속도 패턴 설정
transition-timing-function - CSS: Cascading Style Sheets | MDN
transition-timing-function - CSS | MDN
The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
developer.mozilla.org
transition-timing-function은 전환 효과의 속도 패턴을 설정합니다. 주요 값은 다음과 같습니다:
- ease: 천천히 시작해서 중간에 빨라지고, 끝에서 다시 느려짐 (기본값).
- linear: 일정한 속도로 변화.
- ease-in: 천천히 시작해서 점점 빨라짐.
- ease-out: 빠르게 시작해서 점점 느려짐.
- ease-in-out: 천천히 시작하고, 천천히 끝남.
- step-start: 변화가 즉시 시작.
- step-end: 변화가 즉시 끝남.
- steps(n, start/end): n단계로 나눠서 변화.
- cubic-bezier(n, n, n, n): 사용자 정의 속도 곡선.
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS flexbox 사용해보기 (2) | 2025.07.18 |
|---|---|
| CSS Float와 Clear 속성 (0) | 2025.07.18 |
| CSS position 관련 속성(Position, Z-Index, Overflow) (3) | 2025.07.18 |
| CSS font 속성 (2) | 2025.07.18 |
| CSS block, inline (0) | 2025.07.18 |