AZ Tools

CSS 애니메이션 생성기

개발

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

—
프리셋

미리보기

생성된 CSS

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

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

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

사용법

  1. 프리셋 선택(fade·slide·bounce 등).
  2. duration·delay·easing·iteration·direction·fill-mode 조정.
  3. 미리보기 확인 후 생성된 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 같이 시작/끝 상태 있는 속성에서 가장 잘 보임.

관련 도구

JWT 디코더

JWT의 헤더·클레임·만료를 즉시 확인하세요.

개발00

UUID 생성기

무작위 버전4 UUID를 여러 개 한 번에 생성하고 복사하세요.

개발00

해시 생성기 (SHA)

텍스트로 SHA-1·SHA-256·SHA-384·SHA-512 해시를 생성하세요.

개발00

URL 인코더 / 디코더

URL용으로 텍스트를 퍼센트 인코딩하거나, 인코딩된 URL을 디코딩하세요.

개발00

Base64 인코더 / 디코더

텍스트를 Base64로 인코딩하거나 다시 텍스트로 디코딩하세요.

개발00

JSON 포맷터 & 검증기

브라우저에서 바로 JSON을 포맷·정렬·압축·검증하세요.

개발00