디자인 아틀라스
EN
↝ 모션

바운스

Bounce

목표 지점에 도착한 뒤에도 몇 번 더 튕기며 잦아드는 애니메이션. 물리적으로 통통 튀는 공을 흉내 냅니다.

다른 이름: Bounce easingElastic bounce
···
html
<div class="stage2">
  <div class="ground"></div>
  <div class="drop">★</div>
</div>
css
.stage2{position:relative;width:100%;height:100%}
.ground{position:absolute;left:16%;right:16%;bottom:30%;height:2px;background:var(--line)}
.drop{position:absolute;left:50%;bottom:30%;width:50px;height:50px;margin-left:-25px;border-radius:14px;
  display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px;
  animation:bounce 2.4s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes bounce{
  0%{transform:translateY(-120px)}
  38%{transform:translateY(0)}
  50%{transform:translateY(-42px)}
  62%{transform:translateY(0)}
  72%{transform:translateY(-16px)}
  82%{transform:translateY(0)}
  90%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}

spring이 물리량(강성·감쇠)으로 자동 계산되는 것과 달리, bounce는 보통 keyframes에 튕기는 지점들을 직접 손으로 배치해서 만듭니다. 각 튕김마다 높이가 줄어드는 게 핵심이라, 뒤로 갈수록 keyframe 간격도 좁아지고 높이 값도 작아집니다.

CSS 표준 이징에는 bounce 키워드가 없어서 라이브러리(easings.net의 easeOutBounce 등)나 직접 만든 keyframes가 필요합니다.

언제 쓰나

알림이 도착했을 때, 아이콘이 등장할 때처럼 "톡" 하고 튀는 가벼운 인상을 주고 싶을 때. 진지한 데이터(대시보드 숫자 등)에는 과합니다.