@keyframes 와 animation 선언을 함께 만들기
키프레임 애니메이션은 단계를 정의하는 @keyframes 블록과, 그 이름을 불러 쓰는 animation 선언 두 부분으로 나뉩니다. 한쪽만 적어도 오류가 나지 않고 그냥 아무 일도 일어나지 않아서 원인을 찾기 번거롭습니다. 여기서는 단계 목록을 줄 단위로 받아 두 부분을 한꺼번에 만듭니다.
입력한 단계를 검사합니다
백분율이 0~100 범위인지, 같은 백분율이 두 번 나오지 않는지, 속성 표기에 콜론이 있는지 줄 번호와 함께 확인합니다. 만든 코드는 브라우저에 실제로 넣어 보고, 값이 무효로 버려진 속성이 있으면 이름을 알려 줍니다. 선언 순서는 W3C 의 CSS Animations 명세를 따릅니다(2026년 10월 기준).
하지 않는 것
적당한 지속시간을 권하지 않습니다. 넣은 값으로만 코드를 만들고 전체 재생 시간을 ms 로 보여 줍니다. 두 상태를 잇는 단순 전환은 transition 쪽 도구가 맞고, 스크롤 연동 애니메이션과 Web Animations API 코드는 만들지 않습니다.
자주 묻는 질문
코드를 붙였는데 아무 일도 안 일어납니다.
@keyframes 블록과 animation 선언 중 하나가 빠졌거나 이름이 서로 다른 경우가 가장 흔합니다. 이 생성기는 두 부분을 같은 이름으로 함께 만듭니다.
0% 단계를 꼭 적어야 하나요?
없어도 동작합니다. 그 경우 요소의 현재 값에서 시작하므로, 시작 모습을 확실히 고정하려면 0% 를 적는 편이 낫습니다.
fill-mode 는 무엇을 정하나요?
애니메이션이 끝난 뒤 마지막 단계 값을 유지할지(forwards), 시작 전에 첫 단계 값을 미리 적용할지(backwards)를 정합니다.