🎬 CSS 키프레임 빌더

소개

CSS 키프레임 빌더를 사용하면 코드를 한 줄도 직접 작성하지 않고 @keyframes 애니메이션을 만들 수 있습니다. 세 개의 주요 구간(0%, 50%, 100%)에서 translate(X·Y)·scale·rotate와 opacity를 설정하고, 애니메이션 지속 시간·타이밍 함수(ease·linear·ease-in·ease-out·ease-in-out·custom cubic-bezier)·반복 횟수(유한 또는 infinite)를 패널에서 바로 조절합니다. 실시간 미리보기가 즉시 업데이트되어 움직임이 자연스럽게 느껴질 때까지 값을 조정할 수 있습니다. 준비가 되면 복사 버튼을 클릭하면 완전한 @keyframes 블록과 animation 단축 속성이 클립보드에 복사됩니다. 모든 처리가 브라우저에서 이루어지며 파일 업로드나 데이터 전송이 없습니다.

사용 방법

1. 0% 구간(애니메이션 시작)에서 translate X/Y·scale·rotate와 opacity 값을 설정하세요.
2. 50% 구간 값을 조정해 동작의 중간 지점을 정의하거나, 기본값 그대로 두어 단순한 2단계 전환을 만드세요.
3. 100% 구간(종료 상태) 값을 설정한 후, 지속 시간(초)·타이밍 함수·반복 횟수를 설정하세요.
4. 실시간으로 업데이트되는 미리보기를 확인하면서 애니메이션이 원하는 대로 보일 때까지 값을 조정하세요.
5. CSS 복사 버튼을 클릭해 완전한 @keyframes 블록과 animation 속성을 클립보드에 복사한 후 스타일시트에 바로 붙여넣으세요.

자주 묻는 질문

어떤 transform 속성을 애니메이션할 수 있나요?

translateX·translateY·scale·rotate와 opacity를 애니메이션할 수 있습니다. 각 속성은 0%·50%·100% 키프레임 구간에서 독립적으로 설정됩니다.

어떤 타이밍 함수를 사용할 수 있나요?

ease·linear·ease-in·ease-out·ease-in-out 프리셋과 함께 커스텀 cubic-bezier 옵션을 제공하여 고유한 가속 곡선을 만들 수 있습니다.

애니메이션을 무한 반복할 수 있나요?

네. 반복 횟수를 Infinite로 설정하면 생성된 CSS에 animation-iteration-count: infinite가 포함되어 애니메이션이 계속 반복됩니다.

이 도구를 사용하려면 CSS를 알아야 하나요?

아니요. 빌더는 완전히 시각적으로 동작합니다 — 슬라이더를 움직이고 드롭다운에서 값을 선택하기만 하면 CSS가 자동으로 생성되어 바로 복사해 사용할 수 있습니다.

생성된 CSS는 모든 최신 브라우저와 호환되나요?

네. 생성된 코드는 표준 @keyframes와 animation 단축 속성을 사용하며, 벤더 프리픽스 없이 Chrome·Firefox·Safari·Edge 등 모든 최신 브라우저에서 지원됩니다.