본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS cubic-bezier 생성기

CSS Cubic Bezier Generator

드래그 가능한 제어점으로 이징 커브를 빚고 선택한 지속 시간의 실시간 모션 미리보기로 cubic-bezier() 값을 복사합니다.

작업 경로 / 입력에서 결과까지

첫 번째 컨트롤 점 놓기

로컬에서 실행 · 업로드 없음

CSS cubic-bezier 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

cubic-bezier 이징 곡선을 디자인하는 방법

  1. 01

    첫 번째 컨트롤 점 놓기

    컨트롤 점 X1을 0~1, 컨트롤 점 Y1을 −1~2 범위로 설정하세요. 곡선 차트가 실시간으로 다시 그려지고, 시작점에서 핸들로 이어지는 가이드 선이 보여요.

  2. 02

    두 번째 컨트롤 점 놓기

    컨트롤 점 X2(0~1)와 컨트롤 점 Y2(−1~2)를 설정하세요. Y 값을 1 너머로 당기는 것이 이징에 탄력을 주는 오버슈트를 만들고, Y1을 0 아래로 당기면 움직임이 시작되기 전에 잠깐의 예비 동작이 더해져요.

  3. 03

    지속 시간 설정하기

    지속 시간을 0.1~4초 사이에서 고르세요. 모션 트랙 위의 마커가 입력한 곡선 그대로 루프합니다. 지금 보는 리듬이 그대로 프로덕션의 리듬입니다.

  4. 04

    알려진 곡선에서 시작할 수도 있습니다

    기본 곡선(0.25, 0.1, 0.25, 1)은 표준 ease 키워드와 정확히 같고 중립적인 출발점입니다. 샘플 불러오기를 누륵면 탄력 있는 오버슈트 곡선(0.34, 1.56, 0.64, 1)이 적용돼 Y 값이 1을 넘으면 무슨 일이 일어나는지 보여 줍니다.

  5. 05

    타이밍 CSS 복사하기

    「CSS 복사」 또는 「.css 다운로드」로 toolars-cubic-bezier.css를 저장해요. .motion 규칙은 transition-duration과 두 timing-function 속성을 설정하지만 animation-duration은 설정하지 않아요. 키프레임 애니메이션에는 시간을 별도로 지정하세요.

  6. 06

    볼내기 전에 차트 읽기

    차트는 고정된 시작점과 끝점 사이에서 시간에 따른 진행을 그려요. 평평한 구간은 느리고, 가파른 구간은 빨라요. 시작 아래로 낮아지거나 끝을 넘어 올라가는 곡선은 오류가 아니에요. 예비 동작과 오버슈트가 정직하게 그려진 것입니다.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS cubic-bezier 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS cubic-bezier 생성기 도구가 실제로 하는 일

모달은 빠르게 열리되 부드럽게 자리 잡아야 하고, 카드 호버에는 작은 오버슈트가 필요하고, 온볼딩 툴팁은 느긋해야 합니다. 이징은 잘 다듬은 UI와 기본값 그대로의 UI를 가르는 요소입니다. 실제로 움직이는 미리보기를 볼며 곡선을 그리는 것은 스타일시트에서 숫자 넷을 찍어 맞히는 것보다 확실하고, 실험은 모두 탭 안에 머물러요. 루프가 마음에 들 때, 네 값은 이미 프로덕션에서도 올바른 상태입니다.

자주 묻는 질문

X는 0~1인데 Y가 −1~2인 이유는 무엇인가요?
CSS 표준은 곡선을 따라 시간이 항상 앞으로 흐륵도록 두 X 값을 [0, 1] 안에 둘 것을 요구합니다. Y에는 그런 제한이 없고, 0 미만이나 1 초과 값은 예비 동작과 오버슈트를 만들어요. 이 도구는 Y를 −1~2로 제한해 실용적인 모든 이징을 커버합니다.
볼내는 내용은 구체적으로 무엇인가요?
.motion 클래스 하나, 선언은 세 개입니다. transition-duration에는 선택한 초가, 그리고 같은 cubic-bezier() 값이 transition-timing-function과 animation-timing-function 양쪽에 설정됩니다.
미리보기는 어떻게 읽나요?
차트는 고정된 시작점과 끝점 사이에 곡선을 그리고 두 컨트롤 핸들로의 가이드를 보여주세요. 아래 트랙에서는 선택한 지속 시간으로 실제 타이밍 함수를 써서 마커가 움직여요. 근사치가 아니라 정직한 리듬입니다.
ease-in, ease-out, 스프링은 어떻게 만드나요?
첫 핸들의 X를 1로 밀고 Y를 낮추면 느리게 시작하는 ease-in, 둘째 핸들의 X를 0으로 가져오고 Y를 높이면 부드러운 ease-out이 됩니다. 어느 쪽 Y든 1을 넘기면 목표를 지나치는 스프링, 0 아래로 내리면 예비 동작이 됩니다.
이 클래스는 트랜지션과 키프레임 애니메이션 모두에서 동작하나요?
네. 같은 cubic-bezier() 값이 두 timing-function 속성 모두에 설정되고, 지속 시간은 transition-duration에 있습니다. 한 쪽 메커니즘만 필요하면 붙여 넣은 후 다른 줄을 지우세요. 곡선 자체는 메커니즘을 가리지 않습니다. 키프레임에서는 타이밍 함수가 전체 구간이 아니라 각 프레임 쌍 사이에 적용된다는 점을 기억하세요.
무언가 업로드되거나 저장되나요?
아니요. 곡선의 계산과 미리보기는 이 탭 안에서 로컬로 이뤄지고 계정도 필요 없으며, 아무것도 기록되거나 전송되지 않습니다. 초기화를 누륵면 기본 이징으로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성