CSS Animation Generator

CSS @keyframes 애니메이션을 시각적으로 만들어요. 키프레임, 타이밍, 이징을 정의하고 실시간으로 미리보기할 수 있어요.

작동 방식: transform과 opacity를 사용하여 키프레임을 정의해요. 타이밍, 이징, duration을 조정해요. 애니메이션을 실시간으로 미리보고 CSS를 복사해요.

0%25%50%75%100%

@keyframes fadeIn {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

CSS 애니메이션이란?

CSS 애니메이션을 사용하면 JavaScript 없이 HTML 요소를 애니메이션할 수 있어요. @keyframes 규칙을 사용하여 애니메이션 시퀀스의 다양한 지점에서 스타일을 정의해요. 브라우저가 키프레임 사이를 부드럽게 보간하여 transform, opacity, 색상 등의 유동적인 전환을 만들어요.

Animation Generator 사용 방법

프리셋을 선택하거나 처음부터 시작해요. 특정 백분율(0%~100%)에 키프레임을 추가하고 각각에 대해 transform과 opacity 값을 설정해요. 애니메이션 duration, timing function, delay, iteration count를 조정해요. 실시간으로 애니메이션을 미리보고 만족하면 생성된 CSS를 복사해요.

Animation Timing Function

timing function은 애니메이션의 속도 곡선을 제어해요. 'ease'는 느리게 시작하여 빨라졌다가 다시 느려져요. 'linear'는 일정한 속도를 유지해요. 'ease-in'은 천천히 시작하여 가속돼요. 'ease-out'은 빠르게 시작하여 감속돼요. 사용자 정의 곡선을 위해서는 네 개의 제어점이 있는 cubic-bezier()를 사용해요.

CSS 애니메이션 모범 사례

  • transform과 opacity를 애니메이션에 사용해요 — GPU 가속이 되고 레이아웃 재계산을 트리거하지 않아요
  • will-change를 적게 사용하여 브라우저에 다가올 애니메이션을 암시해요
  • UI 피드백은 300ms 이하, 전환은 500ms~1s로 유지해요
  • prefers-reduced-motion 미디어 쿼리를 사용하여 접근성 설정을 존중해요
  • width, height, top, left 애니메이션은 피하고 transform: translate()를 대신 사용해요
  • 애니메이션 후 최종 상태를 유지하려면 animation-fill-mode: forwards를 사용해요