CSS 애니메이션 생성기
등장·퇴장·시선 끌기 프리셋 22종으로 @keyframes 애니메이션을 만들거나, 키프레임을 직접 쓰거나 기존 것을 가져올 수도 있습니다.
키프레임 직접 편집
원하는 구간과 속성을 직접 쓰거나, 기존 @keyframes 블록을 붙여넣고 가져오기를 누르세요.
@keyframes my-animation {
from { opacity: 0; }
to { opacity: 1; }
}
.my-animation {
animation: my-animation 1s ease 0s infinite;
}결과 8줄, 137자@keyframes 규칙과 그 클래스를 한 번에
등장·퇴장·시선 끌기 세 갈래의 프리셋 22종 중 하나를 고르고 지속 시간, 타이밍 함수, 지연, 반복 횟수, 방향, 채우기 모드, 재생 상태를 조절하면 @keyframes 규칙과 이를 적용하는 클래스가 함께 담긴 완결된 CSS 블록을 복사할 수 있습니다. 타이밍 함수는 제어점 네 개를 직접 지정하는 cubic-bezier()나 스텝 수·점프 방식을 고르는 steps()로도 만들 수 있고, 지속 시간과 지연은 슬라이더 대신 값을 직접 입력할 수 있어 30초짜리 느린 반복도 바로 만들 수 있습니다. 미리보기는 사각형·동그라미·글자·카드·그림 중 원하는 대상에서 언제든 다시 재생됩니다.
키프레임을 직접 쓰거나, 이미 있는 것을 가져오기
키프레임 직접 편집을 열면 어떤 프리셋 위에도 원하는 퍼센트 구간과 속성을 직접 쓸 수 있고, 기존 @keyframes 블록을 붙여넣고 가져오기를 누르면 이름과 프레임을 그대로 읽어 옵니다. 올바른 키프레임이 아니면 복사되지 않고 거부되며, 직접 쓴 프레임을 포함한 모든 설정이 페이지 링크에 담깁니다.
순수 CSS, 자바스크립트 없음
모든 프리셋은 표준 CSS @keyframes로만 만들어집니다. 라이브러리도, 빌드 과정도, 런타임도 필요 없습니다 — CSS를 프로젝트에 붙여넣고 애니메이션 이름을 마크업에 맞게 바꾸면 됩니다.
자주 묻는 질문
생성된 애니메이션은 어떻게 사용하나요?
CSS를 복사한 뒤 원하는 HTML 요소에 생성된 클래스를 추가하면 됩니다. @keyframes 블록과 클래스가 함께 포함되어 있어 다른 설정은 필요 없습니다.
애니메이션을 무한 반복할 수 있나요?
네. 반복 횟수를 무한으로 설정하면 계속 반복되고, 숫자를 고르면 지정한 횟수만큼 실행됩니다.
애니메이션을 왕복 재생하거나 마지막 상태로 멈출 수 있나요?
네. 방향은 normal·reverse·alternate·alternate-reverse를, 채우기 모드는 none·forwards·backwards·both를 제공합니다. forwards나 both로 두면 한 번만 재생되는 페이드가 끝난 뒤 opacity 0으로 되돌아가지 않고 그대로 유지됩니다. 복사되는 animation 단축 속성에는 두 값이 CSS 기본값과 다를 때만 들어가므로, 기본값 그대로 두면 적히지 않습니다.
키프레임을 직접 편집하거나 가져올 수 있나요?
네. '키프레임 직접 편집'에서 어떤 프리셋 위에도 원하는 퍼센트 구간과 속성을 직접 쓸 수 있고, 기존 @keyframes 블록을 붙여넣고 가져오기를 누르면 이름과 프레임을 그대로 읽어 옵니다. 올바른 키프레임이 아니면 복사되지 않고 거부되므로 복사해 가는 CSS는 언제나 정상적으로 파싱됩니다.