애니메이션 생성기는 어떤 CSS 속성을 생성하나요?

생성기는 두 가지 CSS를 만듭니다: @keyframes 규칙(애니메이션 프레임 정의)과 CSS 클래스에 적용된 animation 단축 속성입니다. 단축 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode를 하나의 선언으로 결합합니다.

animation-fill-mode란 무엇이며 언제 사용해야 하나요?

'forwards'는 애니메이션 종료 후 요소를 마지막 키프레임 상태로 유지합니다. 페이드인 같은 입장 애니메이션에 적합합니다. 'backwards'는 지연 기간 동안 첫 번째 키프레임을 적용합니다. 'both'는 두 동작을 결합합니다. 'none'은 애니메이션 후 요소를 원래 상태로 돌립니다.

생성된 애니메이션을 특정 요소에 어떻게 적용하나요?

@keyframes 블록과 .animated 클래스를 CSS 파일에 복사한 후 HTML 요소에 클래스를 추가하세요: . animation 속성 값만 복사하여 인라인이나 기존 CSS 규칙에 적용할 수도 있습니다.

사용자 정의 다단계 애니메이션을 만들 수 있나요?

생성기는 미리 정의된 키프레임이 있는 일반적인 프리셋(페이드, 슬라이드, 바운스, 스핀 등)을 제공합니다. 임의 키프레임이 있는 완전한 사용자 정의 애니메이션의 경우 @keyframes 블록을 직접 수정해야 합니다. 생성기 출력은 수정하기 좋은 시작 템플릿을 제공합니다.

CSS 애니메이션이 모든 브라우저에서 작동하나요?

네, CSS @keyframes와 animation 속성은 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 지원됩니다. 생성기는 전 세계 사용률 0.5% 이상의 모든 브라우저에 충분한 표준 접두사 없는 구문을 사용합니다. IE 10+도 CSS 애니메이션을 지원합니다.

CSS 애니메이션 생성기

라이브 미리보기와 함께 타이밍, 지속 시간, 이징을 설정하여 CSS @keyframes 애니메이션을 생성하세요.

애니메이션 설정

애니메이션 유형

지속 시간 (초): 1s

타이밍 함수

반복 횟수

지연 (초): 0s

방향

채우기 모드

라이브 미리보기

CSS @keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

CSS 애니메이션 클래스

.animated {
  animation: fadeIn 1s ease 0s 1 normal forwards;
}

사용 방법

라이브 미리보기와 함께 타이밍, 지속 시간, 이징을 설정하여 CSS @keyframes 애니메이션을 생성하세요.

1드롭다운에서 애니메이션 유형을 선택하세요 (페이드, 슬라이드, 바운스, 스핀 등).
2지속 시간, 타이밍 함수, 반복 횟수, 지연, 채우기 모드를 조정하세요.
3'애니메이션 재생'을 클릭하여 라이브 데모 박스에서 애니메이션을 미리 보세요.
4@keyframes 블록과 애니메이션 클래스를 복사하여 프로젝트에 사용하세요.

주요 기능

미리 정의된 키프레임이 있는 10가지 애니메이션 프리셋
지속 시간, 타이밍, 지연, 반복, 채우기 모드 제어
요청 시 재생되는 라이브 애니메이션 미리보기
@keyframes와 animation 단축 CSS 모두 출력

자주 묻는 질문

더 알아보기

CSS 애니메이션 생성기 가이드 — 부드러운 애니메이션 빠르게 만들기