Korean Web Tools
무료 온라인 웹 도구 모음
홈으로
🎨 CSS 애니메이션 생성기
시각적으로 CSS 키프레임 애니메이션을 생성하고 미리보기하세요
애니메이션 타입
애니메이션 선택
페이드 인
페이드 아웃
왼쪽에서 슬라이드
오른쪽에서 슬라이드
아래에서 슬라이드
위에서 슬라이드
줌 인
줌 아웃
회전 인
바운스
흔들기
맥박
사용자 정의
애니메이션 이름
애니메이션 속성
지속시간 (초)
딜레이 (초)
반복 횟수
1회
2회
3회
무한
방향
정방향
역방향
번갈아
번갈아 역방향
채우기 모드
없음
앞으로
뒤로
양방향
타이밍 함수
ease
ease-in
ease-out
ease-in-out
linear
custom curve
미리보기
▶️ 재생
✨
💡 사용법
기본 사용법
• 원하는 애니메이션 타입을 선택하세요
• 애니메이션 속성을 조정하세요
• 미리보기로 결과를 확인하세요
• 생성된 CSS를 복사해서 사용하세요
사용자 정의
• '사용자 정의'를 선택하세요
• 키프레임 규칙을 직접 작성하세요
• CSS 속성을 자유롭게 변경하세요
• transform, opacity 등을 활용하세요
최적화 팁
• will-change 속성을 함께 사용하세요
• transform과 opacity를 우선 사용하세요
• 너무 복잡한 애니메이션은 피하세요
• 모바일에서의 성능을 고려하세요