디자인 아틀라스디즈니 12원칙 중 하나로, 준비 동작이 없으면 갑작스럽고 기계적으로 느껴집니다. 버튼이 클릭되기 전 살짝 눌리는 느낌, 캐릭터가 점프하기 전 무릎을 굽히는 동작이 예시입니다.
UI에서는 아주 짧게(수십~100ms)만 써야 합니다 — 너무 길면 반응이 느려 보입니다. 본동작과 반대 방향으로 작게 움직이는 게 핵심입니다.
언제 쓰나
강조하고 싶은 버튼 클릭이나 캐릭터 동작에만 아껴서 씁니다. 모든 인터랙션에 넣으면 전체가 느려 보입니다.
애니티시페이션
Anticipation
본동작을 하기 전에 반대 방향으로 살짝 움츠러드는 준비 동작. 골프 스윙의 백스윙처럼, 다음에 무슨 일이 일어날지 미리 예고합니다.
다른 이름: Anticipation (12 principles)Wind-up
···
<div class="lane"><i class="ball"></i><i class="goal"></i></div>.lane{position:relative;width:min(80%,420px);height:40px}
.goal{position:absolute;right:6px;top:50%;width:2px;height:34px;margin-top:-17px;background:var(--line)}
.ball{position:absolute;left:6px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--accent);
animation:launch 2.2s cubic-bezier(.3,0,.2,1) infinite}
@keyframes launch{
0%{left:6px}
18%{left:6px}
30%{left:-12px}
46%{left:calc(100% - 40px)}
60%{left:calc(100% - 46px)}
70%{left:calc(100% - 32px)}
100%{left:calc(100% - 32px)}
}