CSS 애니메이션 생성기

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

무료 CSS 애니메이션 생성기

실시간 미리보기로 CSS 애니메이션을 시각적으로 생성합니다.

팁

• ease-in-out으로 부드러운 애니메이션
• UI 상호작용은 300ms 이내
• transform과 opacity로 성능 향상
• forwards로 최종 상태 유지
• animation-delay로 시차 적용

FAQ

관련 도구