CSS Easing 생성기
베지어 곡선 편집기
애니메이션 미리보기
일반적인 이징 효과
무료 온라인 CSS easing 생성기. 제어점을 드래그하여 cubic-bezier 곡선을 만듭니다. ease, ease-in, ease-out, ease-in-out, linear 프리셋 내장. 실시간 애니메이션 미리보기.
팁과 요령
제어점 드래그
곡선에서 두 제어점(P1, P2)을 직접 드래그하여 이징 곡선을 실시간으로 조정하세요. X축은 시간 진행, Y축은 속성 변화를 나타내며, 곡선 기울기가 애니메이션의 속도 변화를 결정합니다.
실시간 애니메이션 미리보기
"애니메이션 재생"을 클릭하여 공이 이징 함수의 궤적을 따라 이동하는 모습을 확인하세요. 진행 표시줄이 시간 진행을 직관적으로 보여줍니다.
원클릭 복사 CSS
조정이 완료되면 "복사" 버튼을 클릭하여 CSS cubic-bezier() 코드를 자동으로 클립보드에 복사하고 프로젝트에 바로 붙여넣을 수 있습니다.
일반적인 사용 사례
진입 애니메이션
ease-out
퇴장 애니메이션
ease-in
전환 효과
ease-in-out
호버 효과
사용자 정의 곡선
진행 표시기
linear
자주 묻는 질문
cubic-bezier란 무엇인가요?
cubic-bezier는 두 개의 제어점 P1(x1, y1)과 P2(x2, y2)를 통해 3차 베지어 곡선으로 설명되는 애니메이션의 속도 곡선을 정의하는 CSS 함수입니다. 곡선의 X축은 시간 진행(0→1)을, Y축은 속성 변화(0→1)를 나타냅니다. 곡선이 가파를수록 속도가 빠르고, 평탄할수록 속도가 느립니다.
CSS에서 사용자 정의 이징을 어떻게 사용하나요?
CSS transition 또는 animation 속성에서 직접 사용하세요: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. 생성기의 코드 출력 영역이 자동으로 올바른 CSS 코드를 생성합니다. 복사를 클릭하여 바로 붙여넣어 사용하세요.
X와 Y의 유효 범위는 무엇인가요?
CSS cubic-bezier()는 X 값이 0과 1 사이(시작부터 끝까지의 시간에 해당)여야 하며, Y 값은 일반적으로 0과 1 사이이지만 범위를 초과할 수 있습니다(바운스 효과 생성). 이 도구는 X를 [0, 1]로, Y를 [0, 1]로 제한하여 생성된 곡선이 유효한 CSS 이징 함수가 되도록 합니다.
사전 설정 이징의 차이점은 무엇인가요?
ease: 빠름→느림→빠름, 일반적인 전환에 적합합니다.
ease-in: 느림→빠름, 퇴장 애니메이션(요소가 사라짐)에 적합합니다.
ease-out: 빠름→느림, 진입 애니메이션(요소가 나타남)에 적합하며 가장 일반적으로 사용되는 이징입니다.
ease-in-out: 양쪽 끝이 느리고 중간이 빠르며 ease보다 부드럽습니다.
linear: 일정한 속도, 가속이 필요 없는 색상 변화 등에 적합합니다.