CSS 애니메이션 생성기

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

프리셋

지속 시간 (초)

타이밍 함수

지연 (초)

반복

방향

채우기 모드

실시간 미리보기

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

CSS 키프레임 애니메이션이란?

@keyframes 규칙으로 중간 단계를 정의하는 애니메이션입니다.

어떤 타이밍 함수가 있나요?

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.

반복하려면?

반복을 "infinite"로 설정합니다.

fill-mode란?

애니메이션 전후에 스타일이 어떻게 적용되는지 결정합니다.

무료인가요?

네, 완전히 무료입니다.

💬 User Feedback

이 도구 평가

4.8 / 5 · 79 개 평가

더 많은 도구

🌈Css Gradient Generator 📦CSS Box Model Visualizer 📐CSS Flexbox Generator

How to Use

Choose an animation type or customize keyframes
Adjust timing, duration, and easing
Preview the animation in real-time
Copy the generated CSS code

Common Use Cases

Creating hover effects
Building loading animations
Adding entrance/exit animations
Prototyping UI interactions

Frequently Asked Questions

What animation types are available?

Fade, slide, bounce, rotate, scale, flip, pulse, shake, and custom keyframe animations.

Can I customize the timing?

Yes. Adjust duration, delay, iteration count, direction, fill mode, and timing function (easing).

Will it work in all browsers?

Generated CSS includes vendor prefixes for maximum browser compatibility.