물체가 빠르게 움직이거나 충돌할 때 부피는 유지한 채 눌리고(squash) 늘어나는(stretch) 원칙. 디즈니 "애니메이션 12원칙" 중 첫 번째입니다.
디자인 아틀라스<div class="floor"></div><div class="ball"></div>.floor{position:absolute;left:10%;right:10%;bottom:22%;height:2px;background:var(--line)}
.ball{position:absolute;left:50%;bottom:22%;--d:clamp(28px,16vmin,46px);width:var(--d);height:var(--d);
margin-left:calc(var(--d) / -2);border-radius:50%;background:var(--accent);transform-origin:bottom center;
animation:bounce 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes bounce{
0%{transform:translateY(-34vmin) scale(1,1)}
40%{transform:translateY(-34vmin) scale(.9,1.1)}
46%{transform:translateY(0) scale(1.35,.6)}
52%{transform:translateY(0) scale(.85,1.15)}
58%{transform:translateY(-9vmin) scale(1,1)}
100%{transform:translateY(-34vmin) scale(1,1)}
}공이 바닥에 닿는 순간 가로로 넓어지고 세로로 납작해지며(squash), 튀어 오르는 순간에는 반대로 세로로 길어지고 가로로 가늘어집니다(stretch). 핵심은 "부피 보존"입니다 — 한쪽이 늘어나면 다른 쪽이 줄어야 실제 물체처럼 느껴집니다. CSS로는 scaleX·scaleY를 반비례로 keyframe에 넣으면 됩니다.
딱딱한 물체(돌, 금속)는 거의 스쿼시하지 않고, 말랑한 물체(고무공, 캐릭터)는 크게 스쿼시합니다 — 재질의 단단함을 알려주는 신호이기도 합니다.
로딩 인디케이터, 버튼 클릭 피드백, 캐릭터 점프처럼 탄성을 표현하고 싶을 때. 딱딱한 UI 요소(카드, 패널)에는 과하게 쓰지 마세요.