CSS 이징 생성기
무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
CSS에서 이징 함수란 무엇인가요?
이징 함수는 애니메이션이나 트랜지션이 시간에 따라 진행되는 속도감을 제어합니다. 요소가 일정한 속도로만 움직일 필요는 없습니다. 느리게 시작했다가 가속하고, 목표를 살짝 지나쳤다가 안정되는 움직임이 가능합니다. CSS에서는 transition-timing-function 또는 animation-timing-function 속성으로 지정합니다.
cubic-bezier()의 네 숫자는 무슨 의미인가요?
cubic-bezier(x1, y1, x2, y2)는 두 제어점으로 곡선을 정의합니다. 첫 번째 점이 움직임의 시작을, 두 번째 점이 끝을 만듭니다. X는 시간을 나타내며 0~1로 고정되고, Y는 진행도를 나타냅니다. 0이 시작값, 1이 최종값입니다.
Y는 0~1을 벗어날 수 있는데 X는 왜 안 되나요?
X는 실제 시간에 대응하므로 0 미만이나 1 초과는 시간 인과를 깨뜨려 사양에서 금지됩니다. Y는 자유롭습니다. 1을 넘으면 목표를 추월하고, 0 미만이면 먼저 물러났다가 진행합니다. Back 계열 프리셋의 튕김이 바로 이 원리입니다.
ease, ease-in, ease-out의 차이는 무엇인가요?
ease는 브라우저 기본값으로 부드럽게 시작하고 부드럽게 착지합니다. ease-in은 느리게 시작해 빠르게 끝나고, ease-out은 빠르게 시작해 감속하며, ease-in-out은 둘을 합친 것입니다. 이 생성기는 여기에 sine, quad, cubic, quart, expo, back, material 프리셋까지 총 18종을 제공합니다.
공 미리보기는 어떻게 동작하나요?
두 개의 공이 설정한 지속 시간 동안 반복 움직입니다. 위쪽 공은 항상 linear(등속) 기준으로 움직이고, 아래쪽 공은 여러분의 곡선을 따릅니다. 두 공 사이 간격이 벌어지고 좁혀지는 것만으로 이징이 만드는 차이를 정확히 보여줍니다.
생성된 값은 어디에 붙여넣나요?
transition-timing-function 또는 animation-timing-function 값으로 사용하세요. 예: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. 이 도구는 순수한 cubic-bezier(...) 함수만 출력하므로 어떤 규칙에도 바로 넣을 수 있습니다.
이징 함수가 애니메이션 성능에 영향을 주나요?
타이밍 함수 자체는 비용이 없습니다. 시간에 대한 진행도를 다시 매핑할 뿐입니다. 성능은 어떤 속성을 애니메이션하느냐에 달려 있습니다. transform과 opacity는 GPU 친화적이지만, width나 top 같은 레이아웃 속성은 이징과 무관하게 비싼 리플로우를 유발합니다.
진짜 바운스나 탄성 효과를 만들 수 있나요?
단일 cubic-bezier는 한 번의 초과 이동만 표현할 수 있고, 진짜 바운스 같은 다중 반동은 만들 수 없습니다. 그런 효과는 @keyframes에 여러 키프레임을 연결하거나 Web Animations API를 사용하세요. cubic-bezier가 잘하는 한 번의 부드러운 추월이 바로 이 도구의 강점입니다.
여기서 한 조작이 업로드되나요?
아니요. 곡선은 로컬 캔버스에 그려지고 미리보기 애니메이션은 완전히 브라우저 안에서 실행됩니다. 서버로 전송되는 것은 없으며, 페이지 로드 후에는 오프라인에서도 사용할 수 있습니다.
CSS 이징 생성기 사용 방법
숫자를 감으로 맞추는 대신 CSS 이징 곡선을 시각적으로 다듬으세요. 제어점을 끌고, 움직임을 선형 참조와 나란히 비교하고, 완성된 cubic-bezier를 한 번에 복사하세요. 모두 브라우저에서 로컬로 동작합니다.
- 18개 프리셋 중 하나를 출발점으로 고르세요. Ease Out, Expo Out, Back Out 등이 있습니다.
- 곡선의 두 핸들을 끄세요. X축은 시간이라 0에서 1 사이여야 하고, Y축은 진행도라 벗어날 수 있습니다.
- 정밀한 값이 필요하면 숫자 입력으로 P1, P2 좌표를 미세 조정하세요.
- 지속 시간 슬라이더를 조정하고 왕복하는 두 공을 보세요. 속이 빈 공은 항상 등속이고, 채워진 공이 여러분의 곡선을 씁니다.
- 생성된 cubic-bezier 값을 transition-timing-function이나 animation-timing-function에 복사하세요.
Y 핸들을 1 위로 끌어올리면 자신감 있는 오버슈트가 만들어집니다. 예: cubic-bezier(0.34, 1.56, 0.64, 1). 키프레임 없이도 버튼과 카드에 탄력이 생깁니다.
관련 도구
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- CSS 로더 생성기 무료 CSS 로더 생성기. 순수 CSS로 만든 10가지 로딩 스피너를 크기·속도·두께·색상을 실시간 조절하며 고르고, 바로 붙일 수 있는 HTML과 CSS를 복사하세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.
- CSS 클립패스 생성기 무료 온라인 CSS clip-path 생성기. polygon, circle, ellipse, inset 모양을 드래그 가능한 점으로 디자인하고, 실시간 미리보기와 클릭 한 번으로 CSS 코드를 복사하세요.
- CSS 뷰티파이어 CSS 코드를 즉시 포맷하고 정리합니다. 사용자 정의 옵션으로 압축된 CSS를 읽기 쉬운 코드로 변환합니다.
- CSS 압축기 무료 온라인 CSS 압축기. 공백, 주석, 불필요한 문자를 제거하여 CSS 코드를 즉시 압축하고 최적화합니다. 파일 크기를 줄여 웹 성능을 향상시킵니다.