움직임의 조건을 바꾸다
시간 곡선과 재생 시간을 바꾸며 위치·속도·가속도의 연결을 관찰합니다.
CSS 예시는 y₁=0, y₂=0으로 고정합니다.
주황색 선형 이동은 정지 구간과 만날 때 속도가 뛰며, smoothstep은 속도는 이어져도 가속도가 뜁니다. smootherstep은 양 끝의 속도와 가속도가 모두 0입니다.
실제 속도는 거리×f′/시간, 가속도는 거리×f″/시간²입니다. 시간을 절반으로 줄이면 같은 진행률의 속도는 2배, 가속도는 4배가 됩니다. 그래프는 앞뒤 정지 구간을 포함합니다. 끝점 숫자는 정지 상태 0이며, 바로 안쪽 그래프가 경계의 변화를 보여줍니다.
CSS cubic-bezier의 x는 시간입니다. x(u)=t를 이분 탐색한 뒤 y(u)를 구합니다. u=t로 대입한 모드와 비교하세요. 역재생은 현재 시간축의 방향만 뒤집으므로 위치는 유지되지만 즉시 반전하는 속도는 연속이 아닙니다. 계속 달려야 하는 물체에 정지형 곡선을 쓰면 매 구간 멈춥니다. 그래프는 수식 계산이며 브라우저 CSS 실행 시간 측정이 아닙니다. 구간 밖에서 멈추는 것은 이 실험의 정책이며, CSS easing 함수 자체의 끝점 접선 외삽과는 다릅니다.
x₁=1, x₂=0의 정확히 50% 지점은 수직 접선입니다. 위치는 정의되지만 유한한 속도·가속도는 없어 미분 불능으로 표시합니다. 그래프는 그 표본을 연결하거나 척도에 포함하지 않습니다. 바로 옆 지점의 큰 유한 미분값은 그대로 계산합니다.
W3C CSS Easing 정의