Question 1

cubic-bezier 함수란 무엇인가요?

Accepted Answer

cubic-bezier 함수는 CSS 애니메이션과 트랜지션에서 타이밍 함수로 사용되는 부드러운 곡선을 정의합니다. 곡선의 형태를 제어하는 네 개의 매개변수(x1, y1, x2, y2)를 받습니다.

Question 2

animation-timing-function 속성은 무엇을 하나요?

Accepted Answer

animation-timing-function CSS 속성은 애니메이션이 각 사이클을 진행하는 방식을 지정합니다. 애니메이션이 가속되는지, 감속되는지, 일정한 속도로 움직이는지를 제어합니다.

Question 3

ease와 ease-in-out의 차이는 무엇인가요?

Accepted Answer

ease는 빠르게 시작하여 끝부분에서 느려집니다. ease-in-out은 천천히 시작하여 중간에 빨라졌다가 다시 천천히 끝나서 대부분의 UI 애니메이션에 더 자연스러운 느낌을 줍니다.

Question 4

y 값이 0~1 범위를 벗어날 수 있나요?

Accepted Answer

네. 0~1 사이를 유지해야 하는 x 값과 달리, y 값은 해당 범위를 벗어나 오버슈트나 바운스 효과(예: ease-in-back, ease-out-back 프리셋)를 만들 수 있습니다.

Question 5

생성된 타이밍 함수를 애니메이션에 적용하는 방법은?

Accepted Answer

생성된 CSS를 복사하여 스타일시트에 animation-timing-function: cubic-bezier(x1, y1, x2, y2) 또는 transition-timing-function: cubic-bezier(x1, y1, x2, y2)로 적용하세요.

애니메이션 타이밍 생성기

프리셋