디자인 아틀라스
EN
↝ 모션

이징

Easing

애니메이션의 속도가 시간에 따라 어떻게 변하는지를 정하는 곡선. 같은 구간이라도 linear·ease-in·ease-out·back이 완전히 다른 느낌을 만듭니다.

다른 이름: Timing functionEasing curve
···
html
<div class="race">
  <div class="lane l1"><span class="tag">linear</span><i class="dot"></i></div>
  <div class="lane l2"><span class="tag">ease-in</span><i class="dot"></i></div>
  <div class="lane l3"><span class="tag">ease-out</span><i class="dot"></i></div>
  <div class="lane l4"><span class="tag">ease-in-out</span><i class="dot"></i></div>
  <div class="lane l5"><span class="tag">back</span><i class="dot"></i></div>
</div>
css
.race{position:absolute;inset:16% 12% 8%;display:flex;flex-direction:column;justify-content:space-between}
.lane{position:relative;height:2px;background:var(--line);border-radius:2px}
.tag{position:absolute;left:0;bottom:100%;margin-bottom:4px;font:10px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.02em}
.dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent);animation:run 2.4s infinite}
.l1 .dot{animation-timing-function:linear}
.l2 .dot{animation-timing-function:ease-in;background:var(--accent-2)}
.l3 .dot{animation-timing-function:ease-out;background:var(--accent-3)}
.l4 .dot{animation-timing-function:ease-in-out}
.l5 .dot{animation-timing-function:cubic-bezier(.34,1.56,.64,1);background:var(--accent-2)}
@keyframes run{0%{left:0}45%{left:88%}100%{left:88%}}

이징은 애니메이션의 "가속도"입니다. CSS에서는 transition-timing-function이나 animation-timing-function에 키워드(linear, ease, ease-in, ease-out, ease-in-out)나 cubic-bezier() 곡선을 넣어 정합니다.

linear는 기계적으로 느껴지고, ease-out(빠르게 시작해 천천히 멈춤)은 사용자가 만든 동작(모달 등장, 드롭다운)에 자연스럽습니다. ease-in(천천히 시작해 빠르게 끝남)은 화면을 떠나는 동작에 어울립니다. back은 목표를 살짝 지나쳤다가 되돌아오는, 탄성 있는 느낌을 줍니다.

데모의 다섯 트랙이 같은 거리를 동시에 출발합니다. linear만 등속이고 나머지는 도착 시점과 속도감이 전부 다릅니다.

언제 쓰나

버튼 하나에 여러 이징을 섞지 마세요. 등장은 ease-out, 퇴장은 ease-in, 강조가 필요할 때만 back·spring을 씁니다.