CSS 애니메이션 타이밍 함수: easing, cubic-bezier 및 기타

Source: Dev.to

이 글은 CSS + SVG 애니메이션 시리즈의 일부이며, 제로‑JavaScript 모션 스택을 다룹니다.

Introduction

현대 브라우저에는 강력하면서도 잘 알려지지 않은 애니메이션 시스템이 내장되어 있습니다: SVG + CSS 키프레임. 런타임도, 번들러 매직도 필요 없습니다 — 브라우저가 하드웨어 가속을 자동으로 적용하는 마크업과 스타일만 있으면 됩니다.

이 글에서는 CSS 애니메이션 타이밍 함수: easing, cubic‑bezier 및 그 외를 살펴보고, React, Vue, 혹은 일반 HTML 프로젝트 어디에든 바로 넣어 사용할 수 있는 실용적인 복사‑붙여넣기 예제를 소개합니다.

Why SVG + CSS?

SVG 형태는 DOM에 존재합니다. CSS는 이미 @keyframes를 사용해 DOM 요소를 애니메이션하는 방법을 알고 있습니다. 브라우저의 컴포지터 스레드가 나머지를 부드러운 60 fps로 처리해 주며 — 사용자에게 추가 바이트를 전혀 전송하지 않습니다.

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

Key Techniques

1. CSS 클래스 선택자를 사용해 SVG 요소를 타깃팅
   모든 SVG 요소(<svg>, <path>, <circle>, <rect>…)에 class를 지정하고 <div>처럼 애니메이션할 수 있습니다.

2. transform과 opacity를 우선 사용
   이 두 속성은 GPU 컴포지팅을 트리거합니다 — 레이아웃 재계산이나 재페인팅이 없습니다. 언제나 먼저 이들을 사용하세요.

3. animation-delay를 활용해 지연 효과 적용

   .item:nth-child(1) { animation-delay: 0s; }
   .item:nth-child(2) { animation-delay: 0.1s; }
   .item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

아래는 어디에든 붙여넣을 수 있는 완전한 독립형 SVG + CSS 애니메이션 예시입니다:

@keyframes orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}
.dot { animation: orbit 2s linear infinite; transform-origin: center; }

Using CSSVG

키프레임 수식을 직접 손으로 작성하지 않고도 이런 움직임을 디자인할 수 있는 시각적 타임라인 편집기를 찾고 있다면 CSSVG 를 확인해 보세요 — 깔끔한 SVG + CSS 코드를 내보내어 프로젝트에 바로 붙여넣을 수 있습니다.

Summary

• SVG 형태는 DOM 요소이므로 CSS가 네이티브하게 애니메이션할 수 있습니다.
• @keyframes + transform/opacity = GPU‑컴포지팅, 제로‑JS 애니메이션.
• 결과물은 이식 가능한 마크업이며 — React, Vue, Svelte, 혹은 일반 HTML에서도 동작합니다.

Built with CSSVG — the visual CSS + SVG animation editor.