타이밍 함수

몇 가지 일반적으로 사용되는 CSS 타이밍 함수에는 다음과 같은 것들이 있습니다:

1. ease: 시작과 끝에서 빠르게 가속하고 중간에서 감속하는 기본값 타이밍 함수입니다.
2. linear: 애니메이션을 일정한 속도로 진행합니다.
3. ease-in: 시작할 때 빠르게 가속하는 타이밍 함수입니다.
4. ease-out: 끝에서 감속하는 타이밍 함수입니다.
5. cubic-bezier: 사용자 정의 베지어 곡선을 사용하여 타이밍 함수를 정의할 수 있습니다.

cubic-bezier 함수를 사용하면 사용자 정의 타이밍 함수를 만들 수 있으며, ease-in-out과 같은 미리 정의된 함수보다 더 정교한 제어가 가능합니다. cubic-bezier 함수는 cubic-bezier(x1, y1, x2, y2) 형식으로 사용됩니다. 여기서 (x1, y1)은 시작 포인트, (x2, y2)는 끝 포인트를 나타내며, 이를 조절하여 원하는 타이밍 함수를 생성할 수 있습니다.

예를 들어, ease-in-out과 유사한 커스텀 타이밍 함수를 만들려면 다음과 같이 사용할 수 있습니다:

 

 

animation: my-cubic-bezier 0.5s cubic-bezier(0.42, 0, 0.58, 1);

@keyframes my-cubic-bezier {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

위의 코드에서 cubic-bezier(0.42, 0, 0.58, 1)는 ease-in-out과 유사한 타이밍 함수를 정의하고 있습니다.