CSS Cubic-Bezier 곡선 생성기
제어점을 드래그해 CSS 이징 곡선 설계 — 모션 미리보기, cubic-bezier() 값 복사.
프리셋
프리뷰 애니메이션
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);transition-timing-function 또는 animation-timing-function와 함께 사용.
사용법
- 파란색·빨간색 핸들을 드래그해 곡선 모양 조정.
- 또는 프리셋(ease·ease-in-out·overshoot…) 선택.
- 재생을 눌러 선택한 시간으로 모션 체감 후 CSS 복사.
자세한 설명
펼치기접기
제어점 두 개를 끌어 CSS 이징 곡선을 만들고, 원하는 지속 시간으로 예제 요소가 그 곡선에 따라 움직이는 모습을 확인하세요. CSS의 네 가지 키워드는 좌표가 정해진 이름 붙은 곡선일 뿐입니다. ease는 0.25, 0.1, 0.25, 1이고, 처음부터 만드는 것보다 하나를 불러와 출발점으로 삼는 편이 대개 빠릅니다. 두 축은 대칭이 아니며, 어느 쪽이 무엇인지 알아 두면 혼란을 크게 줄일 수 있습니다. 세로축은 진행도이고, 손잡이를 상자 위나 아래로 밀어내는 것은 허용됩니다. 스프링 같은 느낌을 주는 오버슛과 예비 동작이 바로 여기서 나옵니다. 가로축은 시간이고 CSS는 0과 1 사이 값만 받으므로, 범위를 벗어난 선언은 브라우저가 통째로 버립니다. 그래서 편집기는 손잡이를 상자의 왼쪽과 오른쪽 가장자리에서 멈추고, 직접 입력한 X 값도 같은 범위로 맞춥니다.
자주 묻는 질문
왜 Y가 1보다 크거나 0보다 작아도 되나요?
오버슈트(튕김)·앤티시페이션(예비 동작) 효과는 Y가 [0, 1] 밖에 있어야 가능. CSS는 허용 — 애니메이션 값이 잠시 목표를 넘었다가 정착.
X 값은요?
CSS는 X1·X2를 [0, 1]로 제한해 곡선이 시간의 함수가 되도록. 슬라이더가 X는 클램프하고, Y는 1 초과 / 0 미만 허용해 오버슈트 가능.
스프링 물리와 차이?
Cubic-bezier는 고정 시간 위의 결정적 곡선. 스프링(linear(...) 또는 JS)은 실제 물리 모델 — 모델은 다르지만 단순 케이스에선 비슷한 느낌.
CSS에서 어디에 써요?
transition-timing-function: cubic-bezier(...) 또는 animation-timing-function:. Tailwind: ease-[cubic-bezier(...)].
관련 도구
CSS 애니메이션 생성기
CSS 애니메이션을 시각적으로 빌드 — 프리셋 선택·시간/이징/반복 조정·미리보기·키프레임 복사.
개발
정적분 계산기 (수치 적분)
정적분을 약 13자리까지 수치 계산합니다. 유한·무한 적분 구간, 1/√x 같은 끝점 특이점도 다루며 오차 추정과 그래프를 함께 보여 줍니다.
수학·통계
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상·CSS
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상·CSS
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상·CSS
Border Radius 생성기
코너 독립 드래그, 타원 반지름, CSS 복사 — 채팅 버블·필·블랍·탭 프리셋 포함.
색상·CSS