liminfo

CSS Animation Generator

CSS @keyframes 애니메이션 시각적 빌더

프리셋 라이브러리 (총 51개)

Keyframes

@keyframes myAnimation {
  0% {
    transform: translateX(0px);
    opacity: 1;
    background-color: #3b82f6;
  }
  50% {
    transform: translateX(100px) rotate(180deg);
    opacity: 0.5;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) rotate(360deg);
    opacity: 1;
    background-color: #3b82f6;
  }
}

.animated-element {
  animation: myAnimation 1s ease infinite normal;
}

관련 도구

CSS 플레이그라운드색상 선택기색상 변환기Tailwind 레퍼런스이징 함수 레퍼런스

CSS Animation Generator 소개

CSS 애니메이션 생성기는 브라우저에서 직접 CSS @keyframes 애니메이션을 시각적으로 제작할 수 있는 편집 도구입니다. 애니메이션 이름, 지속 시간(초), 이징 함수(ease, linear, ease-in, ease-out, ease-in-out), 반복 횟수, 방향을 설정하고, 각 키프레임별로 백분율 오프셋, CSS transform 값, opacity, 배경색을 지정합니다. 키프레임을 오프셋 순서로 정렬하여 완전한 @keyframes 블록과 animation 단축 속성이 포함된 .animated-element 클래스 선언을 자동으로 생성합니다.

웹 디자이너, UI/UX 엔지니어, 프론트엔드 개발자들이 코드를 직접 작성하지 않고 CSS 애니메이션을 프로토타이핑하고 세밀하게 조정하는 데 이 도구를 활용합니다. 실시간 미리보기 박스가 설정을 변경할 때마다 실제 움직임을 보여주기 때문에 CSS를 직접 수정하고 페이지를 새로고침하는 반복 작업이 필요 없습니다. 원하는 결과가 나오면 생성된 CSS 블록을 한 번의 클릭으로 복사하여 스타일시트에 바로 붙여 넣을 수 있습니다.

기술적으로 이 도구는 React 상태에서 키프레임 객체 배열을 유지 관리하며, `useMemo`를 사용하여 변경이 있을 때마다 CSS 문자열을 재계산합니다. 실시간 미리보기는 `dangerouslySetInnerHTML`을 통해 계산된 @keyframes 규칙을 `<style>` 태그에 주입하고, 동일한 애니메이션 파라미터로 미리보기 요소에 적용합니다. 모든 처리가 브라우저에서 이루어지므로 네트워크 지연이 없고 애니메이션 정의 내용이 사용자 기기에만 남습니다.

주요 기능

  • 키프레임별 오프셋, transform, opacity, 배경색을 개별 제어하는 시각적 @keyframes 편집기
  • 애니메이션 이름, 지속 시간(초), 이징 함수, 반복 횟수, 방향 설정 지원
  • 실제 키프레임 모션을 실시간으로 렌더링하는 라이브 애니메이션 미리보기
  • 키프레임 동적 추가·삭제 — 임의 수의 키프레임 지원
  • 이징 옵션: ease, linear, ease-in, ease-out, ease-in-out
  • 반복 옵션: infinite, 1회, 2회, 3회, 5회
  • @keyframes 블록 및 animation 단축 속성을 포함한 .animated-element 클래스 전체 생성
  • CSS 코드 블록 전체 원클릭 클립보드 복사

자주 묻는 질문

CSS @keyframes 애니메이션이란 무엇인가요?

CSS @keyframes 규칙은 애니메이션이 진행되는 동안 요소가 전환하는 스타일 시퀀스를 정의합니다. 각 키프레임은 타임라인의 백분율 오프셋(0%~100%)과 해당 시점에 적용될 CSS 속성을 지정합니다. animation 단축 속성으로 이름, 지속 시간, 이징, 반복 횟수를 설정하여 요소에 연결합니다.

이징 함수로 애니메이션 속도를 어떻게 조절하나요?

이징 함수(타이밍 함수)는 키프레임 사이에서 애니메이션이 가속하고 감속하는 방식을 제어합니다. "linear"는 일정한 속도를 유지합니다. "ease"는 느리게 시작하고 빨라지다가 다시 느려집니다. "ease-in"은 느리게 시작하여 가속합니다. "ease-out"은 빠르게 시작하여 감속합니다. "ease-in-out"은 양쪽 끝이 모두 느립니다.

키프레임에서 사용할 수 있는 CSS transform 값은 무엇인가요?

CSS transform은 translateX(), translateY(), rotate(), scale(), skew() 및 이들의 조합을 지원합니다. 생성기는 "translateX(100px) rotate(180deg)"나 "scale(1.5)"처럼 유효한 transform 값을 직접 입력하면 그대로 적용합니다. 여러 transform 함수는 하나의 transform 속성 값 안에서 공백으로 구분합니다.

실시간 미리보기는 어떻게 동작하나요?

생성기는 "preview"라는 키프레임 이름으로 정의된 키프레임을 페이지의 <style> 태그에 주입하고, 동일한 지속 시간, 이징, 반복 설정으로 작은 모서리가 둥근 요소에 적용합니다. 즉 실제 브라우저에서 실행 중인 CSS 애니메이션을 타이핑하는 동안 바로 확인할 수 있으며, 미리보기와 프로덕션 간 렌더링 차이가 없습니다.

animation-direction은 어떤 역할을 하나요?

animation-direction 속성은 애니메이션이 앞으로, 뒤로, 또는 번갈아가며 재생되는지 제어합니다. "normal"은 반복마다 0%에서 100%로 재생됩니다. "reverse"는 100%에서 0%로 재생됩니다. "alternate"는 짝수 번째 반복에서 방향을 반전하여 키프레임을 복사하지 않고도 자연스러운 왕복 효과를 만듭니다.

애니메이션을 한 번만 실행하려면 어떻게 하나요?

반복 횟수를 1로 설정하세요. 애니메이션이 모든 키프레임을 한 번 실행하고 최종 상태에서 멈춥니다. 애니메이션이 끝난 후 요소가 100% 키프레임 상태를 유지하게 하려면, 스타일시트의 .animated-element 클래스에 animation-fill-mode: forwards를 추가하세요.

이 도구로 페이드인 애니메이션을 만들 수 있나요?

네. 키프레임 두 개를 생성하세요. 오프셋 0%에서 opacity를 0으로, 오프셋 100%에서 opacity를 1로 설정합니다. opacity만 변경하려면 두 키프레임 모두 transform을 "none"으로 설정하세요. 원하는 페이드 속도에 맞게 지속 시간을 조정하고 한 번만 실행하도록 반복 횟수를 1로 설정합니다.

생성된 CSS를 프로젝트에 어떻게 사용하나요?

생성된 CSS 블록을 복사하여 스타일시트에 붙여 넣으세요. 애니메이션을 적용하려는 HTML 요소에 "animated-element" 클래스를 추가하거나, 스타일시트에서 클래스 이름을 더 구체적인 이름으로 변경할 수 있습니다. @keyframes 규칙만 복사하여 다른 선택자에서 직접 animation 속성을 작성해도 됩니다.