CSS 애니메이션 생성기
페이드·바운스·슬라이드 등 keyframe 애니메이션을 미리보며 CSS 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
페이드·슬라이드·줌·바운스·펄스·흔들기·회전 등 자주 쓰는 애니메이션을 실시간으로 재생하며 확인하고, @keyframes와 animation 속성이 포함된 완성 CSS를 복사합니다. 재생 시간·지연·가속·반복 횟수를 슬라이더로 맞추면 코드가 즉시 바뀝니다.
사용 방법
- 탭에서 페이드·바운스 같은 애니메이션 종류를 고릅니다.
- 재생 시간·지연·가속(timing)·반복 횟수를 조절하며 미리보기로 확인합니다.
- '다시 재생' 버튼으로 언제든 처음부터 다시 볼 수 있습니다.
- 아래 CSS를 복사해 원하는 요소에 .element 클래스로 적용합니다.
자주 묻는 질문
- 복사한 CSS를 어떻게 쓰나요?
- @keyframes 정의를 스타일시트에 붙여 넣고, 애니메이션을 줄 요소에 .element 클래스를 부여하면 됩니다. 클래스 이름은 원하는 대로 바꿔도 됩니다.
- 시작 전·종료 후 상태가 유지되게 하려면?
- 생성된 shorthand 끝에 both(animation-fill-mode: both)가 이미 포함되어 있어, 재생 전에는 첫 프레임을, 끝난 뒤에는 마지막 프레임 상태를 유지합니다.
- 요소가 화면에 보일 때만 재생하고 싶어요.
- IntersectionObserver로 스크롤 노출을 감지해 그때 .element 클래스를 붙이면 됩니다. 이 도구가 만드는 CSS는 표준 속성이라 그대로 동작하지만, 실제 트리거 로직은 프로젝트에서 붙이는 참고용 코드입니다.