📈
무료 CSS Cubic-Bezier 이징 생성기
제어점을 드래그하여 CSS 이징 곡선을 디자인하고, 모션을 라이브로 미리보고, cubic-bezier() 값을 복사합니다. 오버슈트/바운스 사전 설정을 포함합니다.
한 번 로드하면 오프라인에서도 작동
청록색 & 장미색 핸들을 드래그하여 곡선을 조정하세요
모션 미리보기
너비 전환
CSS 값
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
프리셋
장미색 및 청록색 핸들은 박스 위아래로 당길 수 있습니다 (Y가 0-1을 벗어남). 이를 통해 back-out이나 anticipate 같은 오버슈트/바운스 효과를 만들 수 있습니다. X는 0-1 범위 내에 유지됩니다 (시간은 역방향으로 흐를 수 없음).
주요 용도
- 사용자 정의 CSS 전환 이징호버 효과, 메뉴 및 UI 전환을 위해 자연스럽게 느껴지는 이징을 설계합니다.
- 바운스 및 오버슈트 애니메이션상자 밖으로 제어점을 당겨서 재미있는 스프링/바운스 동작을 만듭니다.
- @keyframes 애니메이션의 이징CSS 키프레임 애니메이션을 위한 올바른 animation-timing-function을 선택합니다.
- JS 애니메이션 라이브러리용 이징 값GSAP, Framer Motion, anime.js 등에 대한 cubic-bezier 값을 가져옵니다.
- 이징의 작동 방식 이해베지에 곡선과 그것이 생성하는 동작 사이의 관계를 확인합니다.
사용 방법
편집기는 React 상태와 SVG로 전적으로 브라우저에서 만들어졌으며, 곡선 계산을 처리하는 라이브러리는 없습니다. 끌 수 있는 제어점 두 개가 SVG 3차 베지에 경로를 정의하고, 결과 cubic-bezier() 값을 @keyframes 규칙에 직접 넣어 브라우저 자체 CSS 애니메이션 엔진이 움직임 미리보기를 실행합니다.
- 1제어점을 끌거나 입력SVG 캔버스에 핸들 두 개(청록색 P1, 장미색 P2)가 있습니다. 끌기는 setPointerCapture와 함께 Pointer Events API를 사용하므로 SVG 경계 밖에서도 핸들이 손가락이나 커서를 따라갑니다. 화살표 키로 핸들을 조금씩 옮기거나 x1/y1/x2/y2 숫자 입력란에 정확한 값을 입력할 수도 있습니다.
- 2SVG가 곡선을 실시간으로 그림곡선은 하나의 SVG <path> 요소이며, 상태가 업데이트될 때마다 네 제어점 좌표로 C(3차 베지에) 명령을 다시 계산합니다. 캔버스도 외부 라이브러리도 없이 브라우저의 SVG 렌더러가 경로를 직접 그립니다.
- 3브라우저 CSS 엔진이 이징을 미리보기세 가지 실시간 애니메이션(움직이는 점, 너비 전환, 크기 조정)이 cubic-bezier() 값을 인라인으로 넣은 CSS @keyframes로 실행됩니다. 브라우저 자체 애니메이션 엔진이 곡선을 해석하므로, 보이는 그대로가 실제 CSS에서 나타날 결과입니다.
- 4프레임워크 구문으로 코드 조각 복사탭에서 같은 네 숫자를 CSS transition-timing-function, Tailwind 임의 값 클래스, Framer Motion ease 배열, anime.js easing 문자열 형식으로 표시합니다. 코드 조각은 navigator.clipboard로 클립보드에 기록됩니다. 곡선은 URL 해시(#b=x1,y1,x2,y2)에도 인코딩되어 공유하거나 북마크할 수 있습니다.