CSS <easing-function> 자료형: 애니메이션 이징 함수

CSS <easing-function> 자료형은 값이 바뀌는 속도를 설명하는 수학 함수를 표현합니다. 이 함수를 사용해 애니메이션이 적용된 값이 얼마나 빨리 변해야 하는지 지정할 수 있습니다. transition-timing-function과 animation-timing-function 속성을 참고하세요.

구문

/* 선형 키워드와 함수 */
/* linear(<point-list>) */
linear(1, -0.5, 0)
linear

/* 3차 베지에 키워드와 함수 */
/* cubic-bezier(<x1>, <y1>, <x2>, <y2>) */
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
ease-in
ease-out
ease-in-out

/* 스텝 키워드와 함수 */
/* steps(<number-of-steps>, <direction>) */
steps(4, end)
steps(10, jump-both)
step-start
step-end

값

linear

값이 일정한 속도로 변합니다. 즉 중간에 가속이나 감속이 없습니다. cubic-bezier(0, 0, 1, 1), linear(0, 1)과 같습니다.

<linear-easing-function>

linear() 함수입니다. “선형 스탑”(<linear-stop>)을 한 개 이상 쉼표로 구분한 리스트로 지정해야 합니다. 각각의 스탑은 선택적으로 최대 두 개의 “스탑 길이”(<linear-stop-length>)를 포함하여 애니메이션이나 트랜지션의 진행을 제어할 수 있습니다. 아래의 선형 이징 함수 설명을 참고하세요.

<linear-stop>은 <number>를 사용해 지정합니다. 선형 스탑들 사이의 거리는 동일하지만, 각 스탑에 <percentage> 최대 두 개를 추가로 지정해서 위치와 길이를 조정할 수 있습니다.

• <number>: 애니메이션이나 트랜지션 진행 시간 중의 한 시점을 나타내는 숫자입니다. 0은 시작점, 1은 끝점입니다. 0 미만 1 초과 값도 사용할 수 있습니다.
• <percentage>: 진행 시간 내에서 스탑의 위치를 나타내는 백분율입니다. 백분율 하나를 사용하면 스탑의 위치를 지정합니다. 두 개를 사용하면 첫 번째는 스탑의 시작 시점, 두 번째는 끝 시점을 나타내어 스탑이 길이를 갖게 됩니다. 백분율을 사용하지 않은 경우 스탑들 사이의 거리는 균일하게 나누어집니다.

<cubic-bezier-easing-function>

애니메이션이나 트랜지션의 진행을 제어하는 베지에 곡선을 지정합니다. CSS에서는 베지에 곡선을 수학적으로 설명할 수 있는 네 개의 점인 시작점과 끝점, 각 점의 제어점을 사용해 곡선을 나타냅니다. 자주 쓰이는 베지에 곡선 매개변수에 대응하는 아래 네 개의 키워드를 사용하거나, cubic-bezier() 함수로 직접 곡선을 정의할 수도 있습니다.

ease

cubic-bezier(0.25, 0.1, 0.25, 1)에 대응합니다. 느리게 시작해서 빠르게 가속하고, 서서히 감속합니다. ease-in-out과 비슷하지만 처음 가속 속도가 더 빠릅니다.

ease-in

cubic-bezier(0.42, 0, 1, 1)에 대응합니다. 느리게 시작해서 가속하다가 끝납니다.

ease-out

cubic-bezier(0, 0, 0.58, 1)에 대응합니다. 빠르게 시작해서 서서히 감속합니다.

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1)에 대응합니다. 느리게 시작해서 가속하고, 다시 서서히 감속합니다. 처음에는 ease-in과 비슷하고, 끝에서는 ease-out과 비슷합니다.

cubic-bezier()

네 개의 <number>를 사용해 지정합니다.

• <number>: 제어점 P1과 P2의 위치를 지정합니다. 첫 두 개의 숫자는 P1의 x와 y 좌표고, 다른 두 개는 P2의 x와 y 좌표입니다. 모든 x값은 0 이상 1 이하여야 합니다. 아래의 3차 베지에 이징 함수 설명을 참고하세요.

<steps-easing-function>

애니메이션이나 트랜지션을 계단처럼 동일한 간격의 “스텝”으로 나눠서, 부드럽게 보간하지 않고 스텝마다 끊어서 진행(“점프”)합니다. 아래 두 개의 키워드를 사용하거나, steps() 함수로 직접 스텝을 나눌 수 있습니다.

step-start

steps(1, jump-start) 또는 steps(1, start)에 대응합니다. 애니메이션과 트랜지션이 시작과 동시에 마지막 상태로 바뀐 후 끝날 때까지 유지됩니다.

step-end

steps(1, jump-end) 또는 steps(1, end)에 대응합니다. 애니메이션과 트랜지션이 계속 처음 상태를 유지하다가 끝날 때 마지막 상태로 바뀝니다.

steps()

스텝의 수를 나타내는 <integer>를 사용해 지정할 수 있습니다. 선택적으로 <step-position>을 두 번째 매개변수로 사용할 수 있습니다. 아래의 계단 이징 함수 설명을 참고하세요.

• <integer>: 스텝의 개수를 나타내는 정수입니다. 두 번째 매개변수가 jump-none이라면 2 이상, 그렇지 않다면 1 이상이어야 합니다.

• <step-position>: 값의 진행 (점프) 시점을 제어합니다. 시작과 동시에, 끝남과 동시에, 시작과 끝 모두 한 번씩, 아니면 시작과 끝 모두 점프하지 않는지 지정합니다. 아래의 키워드 중 하나를 사용합니다.

  jump-start

  시작과 동시에, 즉 0의 위치에서 바로 한 번 점프합니다.

  jump-end

  끝과 동시에, 즉 1의 위치에서 바로 한 번 점프합니다. 기본 값입니다.

  jump-none

  시작과 끝 어느 쪽에서도 점프하지 않습니다. 결과적으로 단계가 하나 없어지는 것과 같습니다.

  jump-both

  시작과 끝 모두 한 번씩, 즉 0과 1의 위치에서 한 번씩 점프합니다.

  start

  jump-start와 같습니다.

  end

  jump-end와 같습니다.

설명

이징 함수에는 세 종류가 있습니다.

• 선형 함수
• 3차 베지에 곡선 함수
• 계단 함수

선형 이징 함수

linear() 함수 표기법은 구간별 선형 이징을 생성합니다. linear()는 보통 많은 수의 스탑 사이를 선형 보간하여 3차 베지에 함수로 표현할 수 없는 복잡한 형태의 곡선을 근사할 때 사용합니다.

예제

linear(0, 0.25, 1)은 0, 0.25, 1의 세 스탑을 가집니다. 애니메이션과 트랜지션은 0에서 시작하여 0.25까지 선형 진행한 후, 0.25에서 1까지 다시 선형 진행합니다. <linear-stop-length>를 지정하지 않았으므로 두 구간은 동일한 시간, 즉 총 진행 시간의 50%씩 차지합니다.

linear(0, 0.25, 1)

<linear-stop-length>를 지정하면 각 구간의 시작 위치와 길이를 바꿀 수 있습니다. 백분율 하나를 쓰면 스탑의 위치를 바꿀 수 있습니다.

linear(0, 0.25 75%, 1)

두 개를 쓰면 스탑이 길이를 갖게 됩니다. 두 번째 스탑이 25%부터 75%까지 유지되며, 그 사이에는 값이 바뀌지 않습니다.

linear(0, 0.25 25% 75%, 1)

충분히 많은 점을 통해 스프링 효과도 표현할 수 있습니다.

linear(0, 0.004, 0.016, 0.035, 0.063, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
       0.891, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.891, 1,
       0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
       0.988, 0.984, 0.988, 1)

Linear easing generator도 참고하세요.

3차 베지에 이징 함수

cubic-bezier() 함수 표기법은 3차 베지에 곡선을 정의합니다. 3차 베지에 곡선을 사용한 이징 함수는 보간의 시작과 끝을 부드럽게 만들 수 있어서 “부드러운 이징 함수”라고 불립니다. 3차 베지에 이징 함수는 <number>로 된 입력 진행도와 출력 진행도 사이의 관계를 나타냅니다. 이때 0.0은 초기 상태를, 1.0은 최종 상태입니다.

cubic-bezier(0.1, 0.6, 0.7, 0.2)

3차 베지에 곡선은 P0, P1, P2, P3 네 개의 점으로 정의됩니다. P0과 P3는 곡선의 시작과 끝점을 나타냅니다. CSS에서 두 점은 각각 (0, 0)과 (1, 1)로 고정되어 있으며, P0은 초기 진행도이자 초기 상태를, P3는 최종 진행도이자 최종 상태를 나타냅니다.

모든 3차 베지에 곡선이 이징 함수로 적합한 건 아닙니다. 어떤 3차 베지에 커브는 수학적 함수, 즉 주어진 가로축에 대해 0개 또는 1개의 값만 가지는 함수가 아니기 때문입니다. CSS에 정의된 3차 베지에 곡선은 P0과 P3가 고정돼있으므로, P1과 P2의 횡좌표가 [0, 1] 범위 내에 있다면 유효한 함수이자 적합한 이징 함수입니다.

P1이나 P2의 종좌표가 [0, 1] 범위 밖에 있으면 값이 최종 상태보다 멀리 나갔다가 다시 돌아올 수 있습니다. left나 right 등 일부 속성에 이런 애니메이션이나 트랜지션을 적용하면 “탄력 있는” 효과를 연출할 수 있습니다.

cubic-bezier(0.3, 0.2, 0.2, 1.4)

하지만 어떤 CSS 속성은 값이 허용 범위 밖으로 나가는 걸 제한합니다. 예를 들어 rgb()의 색상 성분은 0 미만이면 0, 255 초과면 255로 취급합니다.

유효하지 않은 3차 베지에 곡선을 지정한 속성은 무시됩니다.

계단 이징 함수

steps() 함수 표기법은 출력 값을 동일 거리의 단계들로 나누는 계단 함수를 정의합니다.

예제

steps(3, jump-start)

steps(3, jump-end)

steps(3, jump-both)

steps(3, jump-none)

명세

• CSS Easing Functions Level 1

브라우저 호환성