Easing Functions Reference

11가지 easing 함수를 포함합니다: linear, ease(기본 CSS 트랜지션), ease-in, ease-out, ease-in-out, easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, easeInQuart, easeOutBounce. 각 함수의 cubic-bezier() 컨트롤 포인트와 시각적 곡선이 표시됩니다.

그리드에서 원하는 easing 함수 카드를 클릭하면 CSS cubic-bezier() 값이 자동으로 클립보드에 복사됩니다. 예를 들어 ease-in-out을 클릭하면 cubic-bezier(0.42, 0, 0.58, 1)이 복사되어 CSS transition이나 animation-timing-function 속성에 바로 붙여넣기 할 수 있습니다.

CSS cubic-bezier(x1, y1, x2, y2)는 두 개의 컨트롤 포인트로 타이밍 곡선을 정의합니다. x값(0-1)은 시간 진행을, y값은 출력 진행을 나타냅니다. 예를 들어 cubic-bezier(0.42, 0, 1, 1)은 ease-in으로 느리게 시작하여 가속합니다. y값이 0-1을 초과하면 easeOutBounce처럼 오버슈트 효과가 생깁니다.

도구 하단의 커스텀 cubic-bezier 편집기를 사용하세요. x1, y1, x2, y2 값을 입력하면(x값은 0-1, y값은 바운스 효과를 위해 이 범위를 초과 가능) cubic-bezier() 문자열이 실시간으로 업데이트되며, 복사 버튼으로 복사할 수 있습니다.

ease-in(cubic-bezier(0.42, 0, 1, 1))은 느리게 시작하여 끝에서 가속하며, 화면에서 벗어나는 요소에 적합합니다. ease-out(cubic-bezier(0, 0, 0.58, 1))은 빠르게 시작하여 감속하며, 화면에 진입하는 요소에 이상적입니다. ease-in-out은 시작과 끝 모두 부드럽게 처리합니다.

easeOutBounce(cubic-bezier(0.34, 1.56, 0.64, 1))는 애니메이션이 최종값을 넘어갔다가 돌아오는 오버슈트 효과를 만듭니다. y2값 1.56이 1.0을 초과하여 스프링 같은 바운스가 생깁니다. 재미있는 UI 요소, 알림 배지, 시선을 끄는 애니메이션에 주로 사용됩니다.

CSS transition-timing-function, animation-timing-function, JavaScript 애니메이션 라이브러리(GSAP, Anime.js, Framer Motion)에서 사용할 수 있습니다. opacity, transform, width, height, color 트랜지션 등의 속성에서 애니메이션 진행 방식을 제어합니다.

이름은 수학적 곡선을 반영합니다: Quad(2차)는 제곱 함수로 보통 수준의 가속, Cubic(3차)는 세제곱 함수로 더 뚜렷한 가속, Quart(4차)는 네제곱 함수로 더 강한 가속을 제공합니다. 각각 In(가속), Out(감속), InOut(양쪽) 변형이 있습니다.