Cubic-Bézier 이징 편집기
드래그 가능한 편집기와 실시간 애니메이션 미리보기로 맞춤형 cubic-bezier 이징 곡선을 디자인하세요.
곡선 편집기
두 핸들을 드래그해 이징 곡선을 만드세요.
애니메이션 미리보기
이징 적용
선형
채우기
1.2s
제어점
점 1
점 2
프리셋
값
cubic-bezier(0, 0, 1, 1)
CSS 출력
transition-timing-function: —;
animation-timing-function: —;
모든 작업이 브라우저에서 실행됩니다 — 아무것도 업로드되지 않습니다.
Cubic-Bézier 이징 편집기 소개
큐빅 베지어 이징 편집기는 CSS 전환과 애니메이션을 위한 사용자 지정 타이밍 함수를 설계합니다. 곡선 캔버스에서 두 개의 제어 핸들을 드래그하면 cubic-bezier(x1, y1, x2, y2) 값이 실시간으로 업데이트됩니다. 애니메이션 미리보기는 조정 가능한 지속 시간과 즉시 재생 기능으로 이징을 선형 기준과 나란히 재생해 차이를 느낄 수 있게 해줍니다.
열 가지 프리셋이 흔히 쓰이는 어휘를 다룹니다 — 표준 ease, ease-in, ease-out, ease-in-out은 물론, 끝점을 넘어 오버슈트하는 back과 anticipate 같은 표현력 있는 곡선, 그리고 머티리얼 스타일의 가속·감속 램프까지 포함합니다. 그대로 사용하거나 드래그해서 자신만의 것을 만드는 출발점으로 활용하세요.
정확한 제어점 좌표를 직접 입력할 수도 있고, 무작위 버튼으로 영감을 얻을 수도 있으며, 순수한 cubic-bezier() 값이나 바로 붙여넣을 수 있는 CSS 규칙을 복사할 수도 있습니다. 편집기 전체가 브라우저에서 실행됩니다.
Cubic-Bézier 이징 편집기 사용 방법
- 곡선 편집기에서 두 개의 핸들을 드래그해 이징 모양을 잡으세요.
- 재생을 클릭해 이징 처리된 애니메이션을 선형 기준과 비교하고, 필요하면 지속 시간을 조정하세요.
- ease, back, anticipate, material 등의 프리셋을 시도해 빠른 시작점을 얻으세요.
- 정확한 값을 위해 숫자 제어점 입력으로 미세 조정하세요.
- cubic-bezier() 값이나 완전한 CSS 스니펫을 복사하세요.
자주 묻는 질문
두 제어점의 좌표인 x1, y1, x2, y2입니다. x축은 시간(0에서 1)이고 y축은 애니메이션 진행률입니다. 초반에 높이 끌어올린 점은 동작을 빠르게 시작하게 하고, 낮게 끌어내리면 느리게 시작합니다.
y 값은 그럴 수 있습니다. 1보다 높은 y는 애니메이션이 목표를 넘어섰다가 다시 자리 잡게 만듭니다 — "back"과 "anticipate" 프리셋이 정확히 이렇게 동작합니다. x 값은 시간이 거꾸로 흐를 수 없으므로 0과 1 사이에 머물러야 합니다.
모든 CSS transition-timing-function이나 animation-timing-function, 그리고 Web Animations API의 easing 옵션에 사용할 수 있습니다. ease-in-out 같은 키워드를 인터페이스에 맞게 조정된 곡선으로 대체합니다.
화면에 들어오거나 입력에 반응하는 요소에는 ease-out(빠른 시작, 부드러운 정지)을 사용하세요 — 즉각적으로 느껴집니다. 화면을 떠나는 요소에는 ease-in을 사용하세요. Ease-in-out은 양쪽 끝이 모두 보이는 움직임에 적합합니다.
네, 계정 없이 무료이며 전적으로 브라우저에서 실행됩니다 — 디자인한 것은 어디로도 업로드되지 않습니다.
인기 검색어
cubic bezier 이징 편집기
cubic-bezier 생성기 css
css 이징 함수 생성기
css transition timing function
애니메이션 이징 곡선 편집기
맞춤형 bezier 곡선 css
ease-in-out cubic bezier
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.