solution.md

공을 튀어 오르게 하기 위해서는 공에는 CSS 프로퍼티인 top과 position:absolute를, 공이 들어있는 필드에는position:relative를 사용할 수 있습니다.

필드의 아래쪽 좌표는 field.clientHeight입니다. top 프로퍼티는 공의 위쪽 모서리를 의미합니다. 그러므로 공의 위쪽 모서리는 0부터 그 위치의 최솟값인 field.clientHeight - ball.clientHeight까지 움직입니다.

튀어 오르는 애니메이션 효과를 적용하기 위해 easeOut모드에서 timing 함수 bounce를 사용합니다.

다음은 애니메이션 효과를 적용한 최종 코드입니다.

let to = field.clientHeight - ball.clientHeight;

animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw(progress) {
    ball.style.top = to * progress + 'px'
  }
});