CSS 키프레임 생성기
바운스, 회전, 맥박, 흔들기, 페이드로 시작해 프레임을 편집하세요. 재생 버튼으로 시작하며 CSS와 같은 값과 구간 이징을 사용합니다.
키프레임
0%와 100%를 포함한 고유 위치 2–20개. 이동→회전→크기 순서이며 출력은 위치순으로 정렬됩니다.
재생을 눌러야 미리 보기가 시작됩니다. 언제든 멈출 수 있으며 샘플에만 적용됩니다.
사용 방법
사용 방법
- 프리셋을 선택하거나 0%와 100%를 포함한 고유 프레임 2–20개를 편집하세요.
- 시간, 지연, 이징, 반복, 방향, 채우기를 설정하고 재생하거나 일시 정지하세요.
- CSS를 복사·다운로드하고 요소에 animated-element 클래스를 적용하세요.
편집 가능한 프레임
위치, 수평·수직 이동, 회전, 배율, 불투명도를 편집합니다. 양 끝이 필요하며 위치순 출력입니다. 이동 ±500px, 회전 ±3600도, 배율 0–5, 불투명도 0–1. 임의 CSS 속성이나 다중 요소 타임라인 편집은 없습니다.
시간과 미리 보기
시간 0.1–60초, 지연 0–60초, 반복 1–100회 또는 무한. 표준 이징 5개와 cubic-bezier, 방향·채우기 4개를 제공합니다. Web Animations 미리 보기는 재생 버튼으로 시작하고 페이지가 숨겨지면 정지합니다. 영역 밖 모양은 잘릴 수 있습니다.
CSS 출력
업로드와 의존성이 없습니다. 키프레임과 클래스만 출력합니다. 여러 애니메이션 조합 시 두 이름을 바꾸고 이용자에게 적절한 동작인지 확인하세요. 동작 줄이기 규칙은 자동 추가되지 않습니다.
자주 묻는 질문
더 알아보기
개별 프레임을 바꿀 수 있나요?
예. 고유 위치에서 추가·삭제하고 변환과 불투명도를 편집하세요. 0%와 100%는 유지합니다.
자동 재생하나요?
아니요. 재생 버튼으로 시작합니다. 재생 중 유효한 편집은 다시 시작하며 정지 중 편집은 시작하지 않습니다.