CSS transition-timing-function — ease · linear · ease-in/out 비교

 

 

Web Development · CSS Transition Timing

CSS transition-timing-function —
ease · linear · ease-in/out 완전 비교

같은 3초인데 왜 5개 박스의 움직임이 다른가

시작 오늘 분석할 코드

5개의 박스가 호버 시 모두 같은 3초 동안 길이가 늘어나는데, 늘어나는 속도 곡선만 다르다. ease, linear, ease-in, ease-out, ease-in-out — 5가지 timing function의 시각적 차이를 직접 보는 코드.

#ex div { float: left; width: 100px; height: 50px; margin: 5px 10px; padding: 5px; color: white; background-color: #006aff; border-radius: 5px; text-align: center; font-weight: bold; } #ex:hover div { height: 400px; } #ex .ease { transition: 3s ease; } #ex .linear { transition: 3s linear; } #ex .ease-in { transition: 3s ease-in; } #ex .ease-out { transition: 3s ease-out; } #ex .ease-in-out { transition: 3s ease-in-out; } <!-- HTML --> <div id="ex"> <div class="ease"> ease </div> <div class="linear"> linear </div> <div class="ease-in"> ease-in </div> <div class="ease-out"> ease-out </div> <div class="ease-in-out"> ease-in-out </div> </div>

실제 출력 미리보기 (영역 위에 마우스를 올려보세요)

ease

linear

ease-in

ease-out

ease-in-out

5개 박스가 동시에 시작·끝나지만 도중의 진행 속도가 모두 다름

용어 용어 정리

timing-function시간에 따른 진행 속도(곡선)

linear처음~끝 일정한 속도 (직선)

ease (기본값)살짝 빠르게 출발 → 빨라졌다 → 천천히 도착

ease-in천천히 → 점점 빨라짐 (가속)

ease-out빠르게 → 점점 느려짐 (감속)

ease-in-out가속 → 감속 (S자)

cubic-bezier()4점으로 직접 그리는 커스텀 곡선

steps()N단계로 끊어 진행 (애니메이션 시계)

---

1 같은 3초인데 왜 다르게 보이나?

duration은 "총 시간", timing-function은 "구간별 진척도"

5개 박스 모두 0초에 시작해서 3초에 끝난다. 즉 시작·끝 위치는 같다. 차이가 나는 건 "중간에 얼마나 진행했는가" 즉 1초 시점에서 어느 정도 늘어났느냐다.

linear : 1초 = 33% 진행 ease-in : 1초 = 약 12% (천천히 출발) ease-out : 1초 = 약 60% (빨리 출발) ease : 1초 = 약 50% (균형) ease-in-out : 1초 = 약 25% (S자 초중반)

---

2 5가지 곡선 시각화

linear

기계적 — 일정한 속도

ease (기본)

살짝 빠르게 → 빨라짐 → 마무리 감속

ease-in

출발이 느림 → 끝에 가속

ease-out

출발이 빠름 → 끝에 감속

ease-in-out

S자 — 양 끝이 부드러움

cubic-bezier()

직접 만드는 곡선 (튕김·과진행도 가능)

---

3 각 키워드의 실제 cubic-bezier 값

키워드들은 사실 약속된 베지어 곡선의 별명이다.

키워드	cubic-bezier 값	특징
linear	cubic-bezier(0, 0, 1, 1)	완전 직선
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	기본값 (가장 자연스러움)
ease-in	cubic-bezier(0.42, 0, 1, 1)	출발 느림
ease-out	cubic-bezier(0, 0, 0.58, 1)	도착 느림
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)	S자

반응형

---

4 어떤 상황에 어떤 곡선?

ease-out (대부분 추천)

• 나타나는 동작 (모달 등장, 메뉴 펼침)
• 사용자 시점에 가장 자연스러움
• UI 디자인 시스템(Material 등) 기본

ease-in

• 사라지는 동작 (모달 닫힘, 페이드아웃)
• 퇴장에는 빠른 사라짐이 자연스러움
• "가속"의 의미가 어울리는 출발

linear

• 로딩바, 진행 표시 (시간이 직관적)
• 회전 무한반복
• 일반 hover에는 부자연스러움

ease-in-out

• 왕복 동작 (이동했다 돌아오기)
• 큰 영역의 부드러운 전환
• 0.5초 이상 긴 동작에 어울림

---

5 #ex:hover div — 부모 호버로 자식 모두 변환

왜 #ex:hover의 자식 div에 효과가 들어가나?

#ex:hover div는 "#ex 위에 마우스가 올라간 동안, 그 안의 모든 div"라는 뜻. 자식 박스 하나하나에 호버를 걸면 박스 사이로 마우스가 빠져나갈 때마다 끊긴다 — 부모에 거는 게 안정적이다.

/* X: 자식마다 호버 — 마우스가 박스 사이로 가면 멈춤 */ #ex div:hover { height: 400px; } /* O: 부모 호버 — 박스 사이로 마우스가 가도 유지 */ #ex:hover div { height: 400px; }

---

6 float: left — 5개를 가로로 배치하기

각 박스에 float: left를 줘서 가로로 나란히 놓았다. 단 float은 옛날 방식이고, 현대에는 display: flex나 display: grid가 표준이다.

※ float 사용 시 부모가 자식 높이를 인식하지 못해 무너지는 문제(clearfix)가 있다. 학습 코드에는 괜찮지만 실무에선 flex로 바꾸는 게 좋다.

---

7 자주 하는 실수

실수	증상	해결
키워드를 따옴표로 감쌈 ("ease")	속성 무시	키워드는 따옴표 없이
cubic-bezier 값 4개가 아닌 다른 개수	속성 무시	정확히 4개 (x1,y1,x2,y2)
x값이 0~1 범위 밖	유효하지 않음	x는 0~1 사이만 가능
linear 호버에 자연스러움 기대	기계적 느낌	UI 호버는 ease-out 권장
모든 곳에 ease (기본)	UI 모션이 단조로움	등장/퇴장에 따라 다른 곡선

---

8 1초 시점의 진척도 — 박스 5개의 height

호버 시작 후 정확히 1초가 지났을 때, 50px → 400px로 가는 중인 박스들의 위치가 다음처럼 다르다.

곡선	1초 진척률	이때 height
linear	33%	약 165px
ease	50%	약 225px
ease-in	12%	약 92px
ease-out	60%	약 260px
ease-in-out	25%	약 137px

---

핵심 한 줄 요약

timing-function총 시간 안에서 어느 시점에 얼마나 진행할지

linear일정한 속도 — 진행바·회전 반복

ease기본값 — 가장 자연스러운 균형

ease-in가속 — 사라지는 동작에 적합

ease-out감속 — 등장·UI 호버 표준

ease-in-outS자 — 왕복·긴 동작

cubic-bezier키워드의 실제 정의 / 직접 곡선 작성도 가능

Tags

#transition-timing-function #ease #linear #ease-in #ease-out #ease-in-out #cubic-bezier #베지에곡선 #타이밍함수 #가속감속 #S자곡선 #보간곡선 #transition #CSS3 #인터랙션 #웹개발 #티스토리

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

transition-timing-function, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, 베지에곡선, 타이밍함수, 가속감속, S자곡선, 보간곡선, transition, CSS3, 인터랙션, 웹개발, 티스토리