개발자 도구
Cubic Bezier 생성기
비주얼 에디터로 커스텀 CSS 애니메이션 이징 커브 생성
커브 에디터
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 생성기은(는) 브라우저에서 직접 작동하는 무료 온라인 도구입니다. 설치나 회원가입이 필요 없습니다. 모든 처리가 기기에서 로컬로 이루어져 데이터가 안전하게 보호됩니다.
왜 Cubic Bezier 생성기을(를) 사용해야 할까요?
- ✓100% 무료 - 숨겨진 비용이나 유료 기능이 없습니다
- ✓회원가입 불필요 - 계정 생성 없이 바로 사용 가능합니다
- ✓개인정보 보호 - 모든 처리가 브라우저에서 이루어집니다. 데이터가 서버로 전송되지 않습니다
- ✓초고속 - 서버 지연 없이 즉시 결과를 확인하세요
사용 방법
- 위의 입력 영역에 텍스트를 입력하거나 붙여넣으세요
- 도구가 자동으로 입력을 처리합니다
- 결과를 복사하거나 파일로 다운로드하세요
주요 기능
- ✓인터랙티브 드래그 앤 드롭 커브 에디터
- ✓30개 이상의 이징 함수 프리셋
- ✓실시간 애니메이션 미리보기
- ✓다양한 애니메이션 속성 데모
- ✓커브 비교 모드
자주 묻는 질문
cubic-bezier란 무엇인가요?
cubic-bezier는 두 개의 제어점을 사용하는 3차 베지어 곡선으로 애니메이션이 시간에 따라 어떻게 진행되는지 정의하는 CSS 타이밍 함수입니다.
제어점은 무엇을 의미하나요?
두 제어점(P1과 P2)은 곡선의 모양을 정의합니다. X 값은 0과 1 사이여야 하고, Y 값은 바운스 효과를 위해 이 범위를 초과할 수 있습니다.