CSS 애니메이션 생성기

CSS 애니메이션을 시각적으로 빌드 — 프리셋 선택·시간/이징/반복 조정·미리보기·키프레임 복사.

프리셋

지속 시간: 1s지연: 0s타이밍 함수무한 반복반복 횟수방향Fill mode

미리보기

생성된 CSS

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fade 1s ease 0s 1 normal none;
}

표준 속성 사용 — 벤더 프리픽스 없음. 모든 모던 브라우저 unprefixed 지원.

사용법

프리셋 선택(fade·slide·bounce 등).
duration·delay·easing·iteration·direction·fill-mode 조정.
미리보기 확인 후 생성된 CSS 복사.

자세한 설명

펼치기

익숙한 여섯 가지 프리셋(페이드, 슬라이드, 바운스, 회전, 펄스, 흔들기)으로 CSS 애니메이션을 만듭니다. 지속 시간, 지연, 반복 횟수, 타이밍 함수, 채우기 모드를 실시간 미리보기와 함께 조절한 뒤 키프레임과 축약형을 한꺼번에 복사할 수 있습니다. 거의 모두를 걸리게 하는 설정이 채우기 모드입니다. 기본값에서는 애니메이션이 끝나는 순간 요소가 원래 스타일로 되돌아가므로, 페이드인이 마지막 프레임에서 다시 투명해지며 깜빡입니다. forwards로 설정하면 마지막 키프레임이 그대로 유지되는데, 대개 그것이 의도한 바입니다. 반복 횟수는 로딩 표시를 위해 infinite도 받고, 지연은 목록의 항목들이 한꺼번에가 아니라 차례로 나타나게 만드는 수단입니다.

자주 묻는 질문

끝에서 원래 상태로 돌아가는데?

기본 animation-fill-mode는 none — 애니메이션 중에만 스타일 적용. forwards로 설정해 마지막 키프레임 상태 유지.

iteration 1 과 infinite 차이?

iteration은 키프레임을 그 횟수만큼 실행 후 정지. infinite는 영구 반복 — 스피너에 유용하지만 오프스크린 요소에서도 CPU 사용.

prefers-reduced-motion 함께 사용 가능?

예. .box 규칙을 @media (prefers-reduced-motion: no-preference) { … }로 감싸면 모션 민감 사용자 자동 opt-out.

spin에 easing이 안 보이는데?

Spin은 등속 회전 — 단일 회전 변수에 대한 easing은 거의 선형. easing은 opacity·translate 같이 시작/끝 상태 있는 속성에서 가장 잘 보임.

CSS 애니메이션 생성기

사용법

자세한 설명

자주 묻는 질문

관련 도구

CSS Cubic-Bezier 곡선 생성기

CSS Flexbox 플레이그라운드

CSS Grid 플레이그라운드

CSS 필터 플레이그라운드

CSS color-mix() 미리보기 (보간 공간 비교)

HKDF 키 유도 (RFC 5869, 추출·확장)