CSS 애니메이션 생성기: keyframes와 shorthand를 빠르게 만들기

이 페이지는 CSS 애니메이션을 만들 때 가장 자주 쓰는 @keyframes와 animation shorthand를 빠르게 조합하고, 결과를 바로 복사해 프로젝트에 적용할 수 있도록 돕는 문서입니다. 상단의 생성기 영역에서는 프리셋을 선택하고 duration, delay, timing-function, iterations, direction, fill-mode 등을 조절한 뒤 미리보기로 동작을 확인할 수 있습니다.

CSS 애니메이션이란 무엇인가

CSS 애니메이션은 요소의 상태를 시간에 따라 변화시키는 표현 방식입니다. 전환(transition)이 “상태 A에서 B로”의 단일 이동이라면, 애니메이션(animation)은 여러 구간(0%, 60%, 100% 등)을 갖는 @keyframes로 더 풍부한 모션을 설계할 수 있습니다. 버튼 클릭, 모달 등장, 카드 강조, 리스트 로딩, 성공/오류 피드백 등 제품 UI의 대부분은 작은 애니메이션으로 품질이 체감됩니다.

  • 시작점: keyframes 이름과 기본 프리셋을 정합니다.
  • 형태: translate, scale, rotate, opacity처럼 안전한 속성을 중심으로 설계합니다.
  • 리듬: duration과 timing-function이 “느낌”을 결정합니다.
  • 지속: iterations와 fill-mode가 반복/잔상을 제어합니다.

추천: UI 애니메이션은 가능한 한 transform + opacity 조합으로 만들면 브라우저가 합성 단계에서 처리하기 쉬워 부드럽습니다. 반대로 width/height/top/left 같은 레이아웃 속성은 리플로우를 유발해 버벅임이 생길 수 있습니다.

생성기 사용 방법(권장 흐름)

  1. 프리셋 선택: fade-up, fade, slide-up, slide-right, scale, pop, wobble 중 목적에 맞게 고릅니다.
  2. duration/ timing: 빠르게(예: 180~420ms) 시작해 체감 리듬을 잡습니다.
  3. delay: 시퀀스가 필요할 때만 최소로 적용합니다(0~120ms 권장).
  4. fill-mode: 등장 모션은 보통 both/forwards가 자연스럽고, 반복 모션은 none도 괜찮습니다.
  5. 미리보기 재생: “재생”으로 즉시 확인한 뒤, CSS 코드를 복사합니다.

코드를 붙여 넣을 때는 생성기가 출력한 클래스(예: .anim-target)를 실제 컴포넌트 클래스명으로 바꿔 쓰거나, 프로젝트 스타일 규칙에 맞게 네이밍만 조정해도 됩니다.

다른 유틸도 함께 쓰면 작업이 빨라집니다. 섀도우 프리셋으로 레이어감을 맞추고, 보더/라디우스로 테두리 톤을 정리하면 애니메이션이 더 자연스럽게 보입니다.

animation shorthand 구성 요소

생성기는 아래 요소를 결합해 animation 한 줄로 출력합니다. 이 규칙을 이해하면, 프로젝트의 기존 모션 시스템에도 쉽게 합칠 수 있습니다.

  • name: @keyframes 이름. 팀 규칙에 맞춰 의미 있게 짓는 것이 좋습니다.
  • duration: 동작 시간. UI 피드백은 너무 길면 답답하게 느껴집니다.
  • timing-function: 속도 곡선. “snappy/overshoot” 같은 커스텀 베지어가 자주 쓰입니다.
  • delay: 시작 지연. 과하면 입력 지연으로 오해될 수 있어 주의합니다.
  • iterations: 반복 횟수 또는 infinite. 로딩 스피너 같은 경우에만 infinite를 권장합니다.
  • direction: normal/reverse/alternate. 왕복 모션에는 alternate가 유용합니다.
  • fill-mode: forwards/backwards/both/none. 처음/끝 상태를 유지할지 결정합니다.

실무에서는 “등장(enter)”, “퇴장(exit)”, “강조(attention)”, “로딩(loading)”처럼 목적별로 프리셋을 만들어 두면 유지보수가 쉬워집니다. 본 생성기의 프리셋은 그 출발점으로 쓰기 좋습니다.

접근성/성능 체크리스트

구글/빙 같은 검색엔진뿐 아니라 사용자 경험 관점에서도, 모션은 “있으면 좋은 장식”이 아니라 읽기/이해를 돕는 보조여야 합니다. 아래 체크리스트를 습관처럼 적용해 보세요.

  • prefers-reduced-motion: 모션 민감 사용자를 위해 애니메이션을 줄이거나 끕니다.
  • 과한 흔들림 금지: wobble/rotate는 최소로, 반복(infinite)은 정말 필요한 곳에만 씁니다.
  • 레이아웃 변경 최소화: transform/opacity 중심으로 설계해 리플로우를 줄입니다.
  • 의미 있는 트리거: 클릭/완료/오류 등 “이유가 있는 순간”에만 재생합니다.
  • 텍스트 가독성: 등장 모션이 텍스트를 흐리게 만들지 않는지 확인합니다.

사이트 전체의 모션 톤을 맞추고 싶다면, duration과 timing-function을 몇 가지로 고정하고(예: fast/normal/slow), 컴포넌트별로 재사용하는 방식이 좋습니다. 이 페이지의 출력 CSS를 토큰화해도 괜찮습니다.

실전 패턴: UI에서 자주 쓰는 애니메이션

1) 모달/패널 등장

  • 추천 프리셋: fade-up 또는 scale
  • 권장 값: 220~420ms, ease-out 계열, fill-mode both

2) 리스트/카드 순차 등장

  • 추천 프리셋: fade-up
  • 포인트: delay를 40~80ms 간격으로만 주고, 전체 지연이 길어지지 않게 제한합니다.

3) 강조(성공/알림)

  • 추천 프리셋: pop
  • 포인트: scaleFrom을 너무 낮추면 튀는 느낌이 커집니다. 0.92~0.98 사이가 무난합니다.

이 패턴들은 “일관성”이 핵심입니다. 같은 앱에서 모션 스타일이 제각각이면 산만하게 느껴집니다. 따라서 프리셋을 몇 개로 통일하고, 필요한 경우에만 파라미터를 조금씩 조정하는 접근이 좋습니다.

자주 묻는 질문(FAQ)

  • Q. 애니메이션이 다시 재생되지 않아요. A. 같은 animation 값을 다시 적용하면 재생이 생략될 수 있어, 재생 전에 animation을 잠시 끊는 방식이 필요합니다. 이 페이지의 재생 버튼은 이를 고려해 구현되어 있습니다.
  • Q. infinite는 언제 쓰나요? A. 로딩 같은 “상태가 지속되는 동안”만 쓰는 것이 좋습니다. 주의를 끄는 모션을 무한 반복하면 피로도를 높일 수 있습니다.
  • Q. 어떤 속성을 애니메이션하는 게 안전한가요? A. 보통 transform, opacity가 가장 무난합니다. 레이아웃에 영향이 큰 속성은 성능 저하가 생길 수 있습니다.
알림