SUPER EASY UTILS

CSS 애니메이션 생성기

CSS 키프레임 애니메이션을 시각적으로 디자인하고 즉시 코드를 생성하세요.

미리보기

Start
Animate

생성된 CSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

애니메이션 설정

2s

시작 상태0%

0, 0
1
0°
1
#3b82f6

끝 상태100%

100, 0
1.2
45°
1
#ec4899
다음으로
전체 가이드 읽기
또는 다른 도구 시도
CSS 패턴 생성기CSS 그라디언트 생성기ASCII 아트 생성기

추천 도구

유용할 수 있는 엄선된 도구

손코딩 없이 CSS 애니메이션 만들기

소개

CSS 애니메이션은 페이드·슬라이드·바운스·스핀으로 인터페이스에 생동감을 주지만 키프레임을 손으로 쓰기는 번거롭습니다. 이 생성기는 애니메이션을 시각적으로 설정하고 바로 붙여넣을 CSS를 출력하며 브라우저에서 실시간 미리보기됩니다.

사용 방법 (단계별)

  1. 1

    애니메이션 유형 선택

    페이드·슬라이드·바운스·스핀 등 프리셋을 고르세요.

  2. 2

    타이밍 조정

    지속시간·이징·지연·반복 횟수를 설정하세요.

  3. 3

    CSS 복사

    생성된 keyframes와 animation 규칙을 스타일시트에 붙여넣으세요.

작동 원리

유형·지속시간·타이밍 함수·지연·반복 같은 속성을 고르면 해당 @keyframes 규칙과 animation 단축 속성을 만듭니다. 타이밍 함수(ease·linear·cubic-bezier)는 가속 방식을, 지속시간·반복은 속도·반복을 제어합니다. 효과를 실시간으로 보고 생성된 CSS를 스타일시트에 복사하세요.

이럴 때 쓰세요

히어로 섹션·카드에 은은한 등장 애니메이션을 넣을 때. 로딩 스피너·펄스 효과를 만들 때. 코드에 반영하기 전 모션을 프로토타이핑할 때 유용합니다.

자주 묻는 질문

모션의 가속 곡선을 제어합니다 — ease는 천천히 시작·끝, linear는 일정, cubic-bezier는 사용자 정의 곡선을 만듭니다.

CSS 애니메이션 생성기 | Super Easy Utils