CSS 애니메이션 생성기

애니메이션 해부

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

단축 속성의 여덟 가지: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

이징 선택

이 생성기가 제공하는 이징 함수는 여섯 가지입니다:

올바른 속성을 애니메이션하세요

브라우저는 어떤 속성이든 애니메이션할 수 있지만, 레이아웃이나 페인트를 유발하지 않고 GPU에서 부드럽게 처리되는 것은 몇 개뿐입니다:

저렴(컴포지트 전용): transform, opacity, filter.

비쌈(레이아웃/페인트): width, height, top, left, margin, padding, background-color.

작은 요소에서는 width와 top을 60fps로 애니메이션하는 것이 가능하지만, 한 번에 여러 개를 애니메이션하면 모바일에서 뚝뚝 끊깁니다. 복잡한 모션에는 항상 top / left보다 transform: translate(...)를, 애니메이션 width/height보다 transform: scale(...)를 선호하세요.

will-change: 아껴 쓰세요

브라우저에 컴포지트 레이어를 미리 할당하도록 알리면 부드러움에 도움이 될 수 있습니다:

.card { will-change: transform; }

하지만 메모리를 소비합니다. 애니메이션이 트리거되기 직전에 적용하고, 끝나면 제거하세요. 많은 요소에 will-change: transform을 영구 설정하면 도움보다 해가 될 수 있습니다.

모션 감소

일부 사용자는 모션 민감성이 있어 OS 설정을 합니다:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

이 설정을 존중하세요. 즉각적인 상태 변경이나 아주 미묘한 페이드를 폴백으로 제공하세요.