CSS 키프레임 애니메이션 생성기
다중 트랙 타임라인에서 실제 @keyframes 애니메이션을 만드세요. 드래그 가능한 플레이헤드로 트랙별 transform, opacity, background-color 스톱의 중간 상태를 정확하게 보간하여 확인할 수 있습니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
CSS @keyframes 규칙은 작은 타임라인입니다. 백분율 체크포인트마다 해당 순간 속성의 모습을 선언하고, 브라우저가 그 사이를 보간합니다. 수작업으로 만들려면 여러 속성의 여러 체크포인트를 머릿속에 떠올려야 하는데, 이 생성기는 그 타임라인을 눈으로 보고 드래그할 수 있도록 바꿔줍니다. 속성별 수평 레인에 각 체크포인트의 스톱 마커가 표시됩니다.
핵심은 스크럽 플레이헤드입니다. 0%에서 100% 사이 아무 지점으로 드래그하면, 미리보기 상자가 해당 순간의 정확한 결합 상태로 즉시 전환됩니다. 가장 가까운 키프레임이 아니라, 모든 활성 트랙에서 플레이헤드 앞뒤로 있는 두 스톱 사이를 계산한 실제 선형 보간 값입니다. 위치나 회전, 크기 같은 숫자 속성은 단순 숫자로 보간하며, background-color는 빨강, 초록, 파랑 채널을 각각 독립적으로 보간하므로 설정한 색상 사이를 중간색으로 부드럽게 전환합니다.
여러 트랙이 하나의 일관된 애니메이션으로 자동 결합됩니다. 모든 transform 기반 속성(이동, 회전, 크기)은 각 키프레임 백분율에서 하나의 transform 선언으로 병합되며, opacity와 background-color는 실제 수작업 CSS처럼 각자 줄을 유지합니다. 특정 트랙에 명시적 스톱이 없는 백분율 구간은 의도적으로 해당 속성 선언에서 제외됩니다. 브라우저의 키프레임 보간이 존재하는 스톱 사이의 간격을 채우기 때문에, 수작업으로 입력한 @keyframes 규칙과 동일하게 동작합니다.
bounce, shake, pulse, fade, slide-in 다섯 가지 프리셋은 한 번의 클릭으로 적절한 지속 시간, 타이밍 함수, 반복 횟수가 포함된 완전히 수정 가능한 타임라인을 불러옵니다. 언제든지 Play를 누르면 동적으로 삽입된 스타일시트를 통해 실시간으로 생성된 CSS 애니메이션이 미리보기 요소에 적용되며, 전체 @keyframes 블록과 .animated-element { animation: ... } 단축 코드를 복사하여 바로 프로젝트에 쓸 수 있습니다. 이 사이트의 모든 도구와 마찬가지로, 모든 작업은 브라우저에서 로컬로 처리되며 어떠한 데이터도 서버로 업로드되지 않습니다.