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

기본 `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 애니메이션 생성기

여섯 가지 일반 애니메이션 패턴(fade·slide·bounce·spin·pulse·shake) 중 선택 후 슬라이더로 duration·delay·timing function·iteration·direction·fill-mode 조정. 미리보기 패널에서 실제 DOM 요소가 애니메이션 동작 — 복사 전 실제 모습 확인. 생성된 @keyframes 블록과 매칭 `.box { animation: … }` shorthand 복사.

—

프리셋

지속 시간: 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 복사.

자주 묻는 질문

끝에서 원래 상태로 돌아가는데?: 기본 `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() 미리보기 (보간 공간 비교)

Open Graph · Twitter Card 생성기