CSS transition 실전 — 색상 전환 + border 둥글게 변신

 

 

Web Development · CSS Transition

CSS transition 실전 —
색상 전환 + border 둥글게 변신

두 가지 호버 효과로 transition의 응용을 살펴본다

시작 오늘 분석할 코드

두 박스가 나란히 있다. 왼쪽은 1초 동안 색이 바뀌고, 오른쪽은 1.5초 동안 사각형 → 원형으로 변신한다. 각자 다른 timing-function·duration으로 transition을 설정한 실전형 예제.

div { width: 100px; height: 100px; float: left; margin: 30px; } .bg-tr { background-color: skyblue; transition: all ease 1s; } .bg-tr:hover { background-color: blue; } .border-tr { background-color: orange; border: 3px solid black; transition: all linear 1.5s; } .border-tr:hover { border: 3px solid red; border-radius: 50%; } <!-- HTML --> <div class="bg-tr"></div> <div class="border-tr"></div>

실제 출력 미리보기 (각 박스에 마우스를 올려보세요)

 

 

왼쪽: 1초간 ease로 하늘색 → 파랑 / 오른쪽: 1.5초간 linear로 검정테 사각형 → 빨간테 원

용어 용어 정리

all변할 수 있는 모든 속성에 적용

ease기본 곡선 — 자연스러운 가감속

linear일정한 속도

skyblue / blueCSS 키워드 색상

border-radius모서리 둥글기 (50%면 원)

border 단축두께 / 종류 / 색을 한 줄에

단축 transition 순서property duration timing delay (자유로움)

color transitionRGB 채널 보간으로 자연스럽게

---

1 박스 1 — 색상만 바뀌는 단순한 호버

all ease 1s — 가장 흔한 호버 패턴

.bg-tr는 평소 하늘색(skyblue), 마우스를 올리면 1초에 걸쳐 진한 파랑(blue)으로 변한다. UI 버튼, 카드 등에서 가장 자주 쓰는 패턴.

/* 변환 가능 속성: background-color (RGB 보간) */ skyblue (#87ceeb) ─ 1초 ease ─→ blue (#0000ff) 내부: R: 135 → 0 G: 206 → 0 B: 235 → 255 (B만 살짝 증가) ease 곡선이라 처음 살짝 빠르고, 중간 빠르게, 끝에 천천히 도착함.

---

2 박스 2 — 모양 자체가 바뀌는 변신

all linear 1.5s — border 색과 둥글기를 동시에

.border-tr은 호버 시 두 가지가 동시에 변한다.

속성	평소	호버	변화
border 색	black (#000)	red (#f00)	RGB 보간 (검정 → 빨강)
border-radius	0 (사각형)	50% (원)	0% → 50% 보간

두 속성 모두 all의 대상이라 함께 보간된다. 1.5초간 linear 곡선이라 일정한 속도로 사각형이 점점 모서리가 둥글어지면서 색도 변한다.

※ border-radius 보간의 묘미

• 0% → 50% 사이에 25%가 있을 때 적당히 둥근 사각형(squircle)이 나타남
• 이 중간 단계가 시각적으로 가장 매력적이라 의도적으로 쓰는 디자인도 있음
• 버튼이 호버 시 부드럽게 알약 모양 → 캡슐 모양으로 변하는 효과

---

3 ease vs linear — 1초 시점에서 어떻게 다른가?

박스1과 박스2는 같은 호버 동작이지만 곡선이 다르다.

박스1: ease (1s)

• 0~0.2초: 천천히 시작
• 0.2~0.7초: 빠르게 변화
• 0.7~1초: 부드럽게 도착
• 가장 자연스러운 색상 변환

박스2: linear (1.5s)

• 매 0.1초마다 동일한 양 변화
• 색·모양 변화가 기계적
• 로딩바·진행 표시에 적합
• 호버 효과로는 약간 부자연스러움

---

반응형

4 transition 단축 속성 순서의 자유

"all ease 1s"와 "all 1s ease"는 같다

이번 코드를 자세히 보면 박스1은 all ease 1s, 박스2는 all linear 1.5s이다. 사실 표준 권장 순서는 property → duration → timing → delay지만, CSS 파서가 시간(s/ms 단위)과 키워드를 알아서 구분해주기 때문에 순서를 바꿔도 동작한다.

아래 모두 동일하게 작동: transition: all 1s ease; transition: all ease 1s; transition: 1s all ease; transition: 1s ease all;

※ 단, 시간이 두 개일 때만 의미가 갈린다 — 첫 번째 시간 = duration, 두 번째 시간 = delay. 그래서 시간을 두 개 적을 땐 순서가 중요하다.

---

5 "all"이 가져오는 편의와 함정

all 의 장점

• 호버에서 변하는 모든 속성 자동 처리
• 코드가 간결
• 속성 추가 시 별도 수정 불필요

all 의 함정

• 의도치 않은 속성까지 transition
• 레이아웃 속성(width 등)에 부담
• 큰 페이지에서 성능 저하
• 실무 권장: 명시적 속성

/* 실무 권장 */ .border-tr { transition: border-color 1.5s linear, border-radius 1.5s linear; }

---

6 border 단축 속성

border: 3px solid black 의 의미

border는 border-width, border-style, border-color를 한 줄에 묶는 단축 속성이다.

부품	이번 코드	의미
두께	3px	테두리 굵기
종류	solid	실선 (다른 옵션: dashed, dotted, double)
색	black / red	색 (호버에서 빨강으로 변함)

호버에서 border: 3px solid red로 통째로 다시 적었지만, 결과적으로는 색만 검정 → 빨강으로 보간된다 (두께·종류는 같으니 변화 없음).

---

7 진행 흐름 — 박스2의 호버 1.5초

1

0초 (호버 진입)주황 사각형, 검정 테두리, border-radius 0

2

0.5초border-radius 약 16% (살짝 둥글), 테두리 색 ⅓ 정도 빨강 쪽

3

1초border-radius 약 33% (둥근 사각형), 테두리는 절반 이상 빨강

4

1.5초border-radius 50% (완전 원), 테두리 빨강 완성

5

호버 이탈역방향 1.5초 — 다시 사각형 검정 테두리로

---

8 자주 하는 실수

실수	증상	해결
호버에 transition 작성	마우스 뗄 때 점프	기본 셀렉터에 작성
border 두께 자체를 바꿈	레이아웃이 1~2px 흔들림	두께는 그대로, 색만 바꾸기
border-radius % 단위 빠뜨림	정확한 원이 안 됨	50% 또는 50px 등 정확히
linear를 쓰며 호버에 자연스러움 기대	딱딱한 느낌	호버는 ease/ease-out 권장
all에 의존해 무거운 속성 보간	크롬 DevTools 성능 경고	transform/opacity 위주로

---

9 float vs flex

이 코드는 두 박스를 가로로 배치하기 위해 float: left를 썼다. 옛 방식이고, 현대에는 display: flex가 표준이다.

/* 현대식 동등 코드 */ body { display: flex; gap: 60px; padding: 30px; } div { width: 100px; height: 100px; } /* float·margin 30px 둘 다 제거 가능 */

---

핵심 한 줄 요약

박스1all ease 1s — 색상 보간의 정석

박스2all linear 1.5s — 사각형 → 원 변신

all변하는 모든 속성에 적용 — 편하지만 큰 컴포넌트엔 명시 권장

border-radius 0→50%사각형 → 둥근 사각형 → 원으로 부드럽게

단축 순서자유 — 시간/키워드를 파서가 구분

두 시간일 때첫째 = duration, 둘째 = delay

실무 호버.2~.5s ease-out 정도가 가장 자연스러움

Tags

#transition #all #ease #linear #border-radius #색상전환 #사각형원 #모양변신 #transition-delay #hover #인터랙션 #호버효과 #CSS3 #보간 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

transition, all, ease, linear, border-radius, 색상전환, 사각형원, 모양변신, transition-delay, hover, 인터랙션, 호버효과, CSS3, 보간, 웹개발, HTML, 티스토리