CSS easing 생성기

언제 사용하나요?

CSS 애니메이션이나 transition의 속도 곡선을 커스터마이징할 때 cubic-bezier 값을 시각적으로 조정하며 원하는 easing을 만듭니다.

사용 방법

• 4개의 cubic-bezier 제어점 값을 슬라이더로 조정합니다.
• 애니메이션 미리보기로 easing 효과를 확인합니다.
• 생성된 cubic-bezier() 값을 복사합니다.

입력값 안내

CSS 트랜지션에 사용할 4개의 베지어 곡선 제어점(x1, y1, x2, y2) 값을 마우스로 드래그하여 조절합니다.

계산·변환 기준

드래그된 핸들의 좌표값을 0.0 ~ 1.0 사이의 비율로 정규화하여 `cubic-bezier(x1, y1, x2, y2)` 형태의 시간 함수 CSS 값을 생성하고, 예시 애니메이션 요소의 `transition-timing-function`에 즉시 반영합니다.

사용 예시

• 애니메이션 튜닝 - transition timing function 값을 직접 조정합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• 점(0.25, 0.1, 0.25, 1) 설정 → cubic-bezier(0.25, 0.1, 0.25, 1) (ease 효과)
• cubic-bezier(0.4, 0, 0.2, 1) → 부드럽게 시작·정지하는 전환 효과

주의사항

• 생성된 cubic-bezier() 값은 참고용입니다. 실제 애니메이션에서 시각적으로 확인 후 미세 조정하세요.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

cubic-bezier 이징이란

cubic-bezier(x1, y1, x2, y2) 함수로 애니메이션 속도 곡선을 지정합니다. ease, ease-in, ease-out 등은 미리 정의된 베지어 값의 별칭입니다.

미리보기로 확인

재생 버튼을 눌러 실제 움직임을 확인한 뒤 원하는 느낌으로 조절하세요. 생성된 cubic-bezier 값을 CSS transition이나 animation의 timing-function에 붙여넣으면 됩니다.

자주 묻는 질문

출력 형식은 무엇인가요?

transition-timing-function에 넣을 cubic-bezier() 값을 출력합니다.

easing 효과를 미리 볼 수 있나요?

재생 버튼을 누르면 적용한 cubic-bezier 곡선대로 공이 움직이는 애니메이션으로 확인할 수 있습니다.

cubic-bezier 값은 어떻게 정하나요?

X1·Y1·X2·Y2 네 점을 슬라이더로 조절하면 그 값으로 cubic-bezier() 함수가 자동 생성됩니다.

easing은 어디에 쓰나요?

transition이나 animation의 timing-function에 넣어 움직임의 가속·감속 느낌을 자연스럽게 조절할 때 씁니다.

관련 도구

• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.