easing-function

cubic-bezier()

cubic-bezier()란

CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다.

transition-timing-function:cubic-bezier(x1, y1, x2, y2);

x1 : 베지어 곡선의 '시작 곡선'을 만드는데에 기준이 되는 x좌표
y1 : 베지어 곡선의 '시작 곡선'을 만드는데에 기준이 되는 y좌표
x2 : 베지어 곡선의 '마지막 곡선'을 만드는데에 기준이 되는 x좌표
y2 : 베지어 곡선의 '마지막 곡선'을 만드는데에 기준이 되는 y좌표

cubic-bezier() 사용방법

#target{
	transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

위와 같은 경우
해당 엘리먼트의 width를
0.5초 동안 제어
4개의 컨트롤 포인트(0.25, 0.1, 0.25, 1.0)를 가진다.

The cubic-bezier() class of easing functions

• ease(기본값) :
  처음과 끝은 상대적으로 느리게, 중간은 빠르게
  (0.25, 0.1, 0.25, 1.0)
  

• linear :
  직선 모양 처음부터 끝까지 일정한 속도
  (0.0, 0.0, 1.0, 1.0)
  

• ease-in
  조금씩 완만하게 상승. 처음은 느리고 갈수록 빠르게
  (0.42, 0.0, 1.0, 1.0)
  

• ease-out :
  ease-in과 반대로 처음은 빠르고 갈수록 느리게
  (0.0, 0.0, 0.58, 1.0)
  

• ease-in-out :
  디폴트값인 ease와 유사하지만 조금 더 완만하고 부드러운 느낌
  (0.42, 0.0, 0.58, 1.0)
  

https://matthewlein.com/tools/ceaser 여기서 그래프를 그려볼수있다

steps()

steps()란

등거리 단계에서 출력 값의 영역을 나누는 단계 함수 를 정의

steps() 사용방법

steps(number_of_steps, direction)

steps(단계, 방향)
number_of_steps(단계) : 스테핑 기능을 구성하는 등거리 트레드의 양을 나타내는 양수
direction(방향) : 점프가 발생할 때를 나타내는 키워드

steps() 방향 종류

• jump-start :
  보간이 시작될 때 첫 번째 단계 또는 점프가 발생
  steps(2, jump-start) steps(2, start)
  

• jump-end :
  보간이 끝날 때 마지막 단계 또는 점프가 발생
  steps(4, jump-end) steps(4, end)
  

• jump-both :
  점프가 0% 및 100% 표시 모두에서 발생하여 보간 반복 중에 단계를 효과적으로 추가
  steps(3, jump-both)
  

• jump-none :
  어느 쪽에도 점프가 없고 대신 0% 표시와 100% 표시를 모두 1/n 기간 동안 유지
  steps(5, jump-none)
  

• start === jump-start
• end === jump-end
• end가 기본값

참고자료
: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function