CSS 애니메이션을 위한 Cubic Bezier 타이밍 함수를 시각적으로 생성하세요. 드래그로 곡선을 조정하고 실시간 애니메이션 미리보기를 확인할 수 있습니다.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* Or use in animation */ animation: myAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* Or in transition shorthand */ transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
기본 제공되는 프리셋(ease, ease-in, ease-out 등)을 선택하거나, SVG 캔버스에서 파란색과 빨간색 제어점을 드래그하여 원하는 곡선을 만드세요.
재생 버튼을 눌러 현재 타이밍 함수로 움직이는 박스를 실시간으로 확인하세요. 지속 시간을 0.1초에서 3초까지 조정할 수 있습니다.
생성된 cubic-bezier() 코드를 클릭 한 번으로 복사하여 CSS transition이나 animation에 바로 사용하세요.
여러 타이밍 함수를 나란히 비교하여 프로젝트에 가장 적합한 애니메이션 효과를 선택하세요.
easeOutBack을 사용하면 버튼이 살짝 튀어나오는 듯한 재미있는 호버 효과를 만들 수 있습니다. 사용자의 시선을 끌고 클릭을 유도하는 데 효과적입니다.
easeOutCirc는 모달이 부드럽게 감속하며 나타나는 효과를 줍니다. 갑작스럽지 않고 자연스러운 UI/UX를 제공합니다.
easeInOutQuad는 페이지 스크롤이나 요소 페이드인 시 부드러운 가속/감속을 제공하여 프리미엄 느낌을 줍니다.
linear 또는 커스텀 곡선으로 일정한 속도의 회전 애니메이션을 만들어 로딩 스피너를 구현할 수 있습니다.
easeOut을 사용하면 드롭다운 메뉴가 빠르게 나타난 후 부드럽게 정지하는 효과를 낼 수 있습니다.
Cubic Bezier는 4개의 점(시작점, 두 개의 제어점, 끝점)으로 정의되는 3차 곡선입니다. CSS에서는 이 곡선을 사용하여 애니메이션의 가속/감속 패턴을 정의합니다. cubic-bezier(x1, y1, x2, y2) 형식으로 사용되며, x1/y1은 첫 번째 제어점, x2/y2는 두 번째 제어점의 좌표입니다.
ease는 중간에 빠르고 시작/끝이 느린 기본 곡선입니다. ease-in은 천천히 시작하여 빠르게 끝나며, 요소가 사라질 때 자연스럽습니다. ease-out은 빠르게 시작하여 천천히 끝나며, 요소가 나타날 때 좋습니다. ease-in-out은 시작과 끝 모두 느리며, 양방향 전환에 적합합니다.
네, 가능합니다. y 좌표가 0 미만이거나 1을 초과하면 'bounce' 효과(easeInBack, easeOutBack 등)를 만들 수 있습니다. 단, x 좌표는 반드시 0~1 사이여야 합니다. 시간이 역행할 수 없기 때문입니다.
네, cubic-bezier()는 transition-timing-function과 animation-timing-function 모두에서 사용할 수 있습니다. 또한 transition이나 animation 단축 속성에도 직접 포함시킬 수 있습니다. 예: transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
cubic-bezier()는 모든 주요 모던 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. IE 10 이상에서도 사용 가능합니다. 단, 복잡한 애니메이션은 성능을 위해 GPU 가속(transform, opacity 사용)을 고려하세요.
비교 모드를 활성화하면 여러 타이밍 함수의 애니메이션을 동시에 볼 수 있습니다. 미묘한 차이를 파악하고 프로젝트에 가장 어울리는 곡선을 선택하는 데 유용합니다. 최대 3개까지 비교할 수 있습니다.
현재는 CSS 코드를 복사하여 별도로 저장하실 수 있습니다. 복사한 cubic-bezier() 코드를 프로젝트의 CSS 변수나 Sass 변수로 정의하면 재사용하기 편리합니다. 예: --custom-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
생성된 CSS 코드는 모던 브라우저에서 사용할 수 있습니다. 복잡한 애니메이션은 성능에 영향을 줄 수 있으므로, transform과 opacity 속성을 사용하여 GPU 가속을 활용하는 것을 권장합니다. 모바일 환경에서는 애니메이션 지속 시간을 짧게(0.2~0.3초) 유지하는 것이 좋습니다.
베지어 곡선은 피에르 베지어가 자동차 설계에 도입한 수학적 곡선으로, 시작점·끝점과 두 개의 제어점으로 정의됩니다. CSS에서 사용하는 cubic-bezier(x1, y1, x2, y2)는 3차 베지어 곡선의 두 제어점 좌표를 매개변수로 받아 애니메이션 타이밍을 결정합니다. x 좌표는 시간 축(0~1), y 좌표는 진행 값 축을 나타내며, 곡선의 형태가 애니메이션의 가속·감속 패턴을 직접적으로 결정합니다.
CSS의 transition-timing-function과 animation-timing-function 속성에 cubic-bezier()를 사용하면 브라우저 기본 제공 키워드(ease, linear 등)보다 훨씬 정밀한 타이밍 제어가 가능합니다. 예를 들어 ease는 cubic-bezier(0.25, 0.1, 0.25, 1)과 동일하며, 디자이너는 이 값을 직접 조정하여 브랜드 고유의 모션 언어를 만들 수 있습니다.
자연스러운 UI 애니메이션을 만들려면 물리 법칙을 참고하는 것이 좋습니다. 요소가 나타날 때는 ease-out 계열(빠르게 시작 후 감속), 사라질 때는 ease-in 계열(천천히 시작 후 가속)을 사용하면 실제 물체처럼 보입니다. 제어점의 y 값이 0~1 범위를 벗어나면 튀어오르는 듯한 bounce 효과를 연출할 수 있어 주목을 끄는 인터랙션에 활용됩니다.