커브 에디터
X1
Y1
X2
Y2
애니메이션 미리보기
지속 시간s
▶
CSS
cubic-bezier(0.250, 0.100, 0.250, 1.000)
transition: all 1s cubic-bezier(0.250, 0.100, 0.250, 1.000); /* or */ animation: yourAnimation 1s cubic-bezier(0.250, 0.100, 0.250, 1.000);
프리셋 & 비교
Cubic Bezier 생성기 소개
비주얼 에디터로 커스텀 CSS 애니메이션 이징 커브 생성
이 도구는 일상적인 작업을 더 빠르고 간편하게 처리하도록 돕는 무료 온라인 도구입니다. 별도의 설치나 회원가입 없이 브라우저에서 바로 사용할 수 있습니다.
Cubic Bezier 생성기 사용이 좋은 이유
- ✓100% 무료 - 숨겨진 비용이나 유료 기능이 없습니다
- ✓회원가입 불필요 - 계정 생성 없이 바로 사용 가능합니다
- ✓개인정보 보호 - 모든 처리가 브라우저에서 이루어집니다. 데이터가 서버로 전송되지 않습니다
- ✓초고속 - 서버 지연 없이 즉시 결과를 확인하세요
사용 방법
- 위의 입력 영역에 텍스트를 입력하거나 붙여넣으세요
- 도구가 자동으로 입력을 처리합니다
- 결과를 복사하거나 파일로 다운로드하세요
주요 기능
- ✓인터랙티브 드래그 앤 드롭 커브 에디터
- ✓30개 이상의 이징 함수 프리셋
- ✓실시간 애니메이션 미리보기
- ✓다양한 애니메이션 속성 데모
- ✓커브 비교 모드
자주 묻는 질문
cubic-bezier란 무엇인가요?
cubic-bezier는 두 개의 제어점을 사용하는 3차 베지어 곡선으로 애니메이션이 시간에 따라 어떻게 진행되는지 정의하는 CSS 타이밍 함수입니다.
제어점은 무엇을 의미하나요?
두 제어점(P1과 P2)은 곡선의 모양을 정의합니다. X 값은 0과 1 사이여야 하고, Y 값은 바운스 효과를 위해 이 범위를 초과할 수 있습니다.