DevToolBox무료
블로그

CSS 애니메이션 생성기

실시간 미리보기로 CSS 키프레임 애니메이션을 시각적으로 생성.

1s
0s
A
@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

CSS 키프레임 애니메이션이란?
@keyframes 규칙으로 중간 단계를 정의하는 애니메이션입니다.
어떤 타이밍 함수가 있나요?
ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.
반복하려면?
반복을 "infinite"로 설정합니다.
fill-mode란?
애니메이션 전후에 스타일이 어떻게 적용되는지 결정합니다.
무료인가요?
네, 완전히 무료입니다.

관련 도구

𝕏 Twitterin LinkedIn

이 도구 평가

4.8 / 5 · 79 개 평가

최신 소식 받기

주간 개발 팁과 새 도구 알림을 받으세요.

스팸 없음. 언제든 구독 해지 가능.

Enjoy these free tools?

Buy Me a Coffee