CSS Animation Generator

Build CSS keyframe animations with live preview.

애니메이션 유형

지속 시간

타이밍 함수

지연

반복 횟수

방향

채우기 모드

라이브 미리보기

Box

생성된 CSS

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

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

이 도구 소개

CSS 애니메이션 생성기를 사용하면 키프레임 사전 설정, 타이밍, 지속 시간, 지연, 반복 설정을 구성하여 부드러운 CSS 애니메이션을 만들 수 있습니다. 라이브 미리보기로 애니메이션을 확인하고, @keyframes 규칙과 animation 단축형을 바로 복사할 수 있습니다.

transform과 opacity 속성을 사용하는 CSS 애니메이션은 GPU에서 합성되어 레이아웃이나 페인트를 유발하지 않으므로 성능이 효율적입니다. 이 도구의 12개 사전 설정은 모두 이 모범 사례를 따릅니다.

사용 방법

드롭다운에서 애니메이션 유형을 선택하세요.
지속 시간을 설정하세요 (예: 0.5s, 2s).
이징을 제어하는 타이밍 함수를 선택하세요.
선택적으로 애니메이션 시작 전 지연을 설정하세요.
반복 횟수를 설정하세요 (숫자 또는 infinite).
다시 재생으로 미리보고 복사로 CSS를 내보내세요.

활용 사례

프런트엔드 개발자는 페이드 및 슬라이드 애니메이션으로 콘텐츠 로딩 시 체감 성능을 향상시킵니다. UI 디자이너는 버튼 펄스, 알림 흔들기 같은 마이크로 인터랙션을 프로토타이핑합니다. 로딩 스피너는 spin 애니메이션을 사용합니다.

자주 묻는 질문

fill-mode: both는 무엇인가요? — 애니메이션이 시작 전(지연 포함)에 시작 스타일을 적용하고 종료 후에 종료 스타일을 유지합니다. 가장 일반적으로 유용한 설정입니다.
애니메이션을 무한 반복하려면 어떻게 하나요? — 반복 횟수를 infinite로 설정하세요.
CSS 애니메이션이 JavaScript 애니메이션보다 나은가요? — 간단한 선언적 효과에는 브라우저가 최적화할 수 있어 CSS 애니메이션이 선호됩니다. 복잡한 시퀀싱이나 인터랙티비티에는 JavaScript가 더 많은 제어를 제공합니다.