cubic-bezier 생성기 — CSS 이징 편집기

그것은 애니메이션의 타이밍을 제어합니다 — 길이나 거리가 아니라 진행 정도가 지속 시간 안에서 어떻게 분배되는지를 정합니다. 곡선은 가로축의 경과 시간을 세로축의 애니메이션 진행 정도에 대응시키므로, 가파른 구간은 빠른 움직임을, 평평한 구간은 느린 움직임을 뜻합니다. 드래그할 수 있는 두 제어점이 이 곡선을 휘게 하여, 부드럽게 시작하거나 순식간에 튀거나 그 사이의 어떤 이징이든 설계할 수 있습니다.

두 시간 값(각 제어점의 X 좌표)은 0과 1 사이에 있어야 하지만, 진행 값(Y 좌표)은 1을 넘거나 0 아래로 내려가도 됩니다. Y를 그 한계 밖으로 밀면 애니메이션이 목표를 지나쳤다가 되돌아오거나, 앞으로 나아가기 전에 잠시 뒤로 당겨집니다 — 통통 튀고 탄력 있는, 그리고 예비 동작 효과의 바탕입니다. 미리보기가 이 움직임을 또렷이 보여 주므로 과하지 않게 딱 알맞은 튕김을 맞출 수 있습니다.

cubic-bezier() 값은 CSS의 transition-timing-function이나 animation-timing-function에 붙여 넣어 ease-in-out 같은 키워드를 대신하게 하세요. 모든 최신 브라우저에서 작동합니다. 편집기 자체는 로컬 자바스크립트로 브라우저 안에서 완결됩니다 — 곡선, 실시간 미리보기, 생성된 값 모두 여러분의 기기에서 계산되므로 만든 내용이 서버에 업로드되거나 저장되지 않습니다.