🎨 CSS 애니메이션 생성기

시각적으로 CSS 키프레임 애니메이션을 생성하고 미리보기하세요

애니메이션 타입

애니메이션 속성

미리보기

✨

💡 사용법

기본 사용법

  • • 원하는 애니메이션 타입을 선택하세요
  • • 애니메이션 속성을 조정하세요
  • • 미리보기로 결과를 확인하세요
  • • 생성된 CSS를 복사해서 사용하세요

사용자 정의

  • • '사용자 정의'를 선택하세요
  • • 키프레임 규칙을 직접 작성하세요
  • • CSS 속성을 자유롭게 변경하세요
  • • transform, opacity 등을 활용하세요

최적화 팁

  • • will-change 속성을 함께 사용하세요
  • • transform과 opacity를 우선 사용하세요
  • • 너무 복잡한 애니메이션은 피하세요
  • • 모바일에서의 성능을 고려하세요