[CSS] 처음 만나는 베지에 곡선(cubic-bezier)

저번 스프린트에 메인 페이지에서 여러 애니메이션을 적용하는 걸 했다. 그때 css 속성 중에 cubic-bezier라는 게 있었다.
그게 뭔지 알고 싶어서 써보는 글이다.

bezier 곡선은 두 개 이상의 점을 가지고 정의되는 곡선이다. 점 몇 개로 특정한 곡선을 만들 수 있어서 컴퓨터 그래픽 분야에서 많이 쓰인다고 한다. 나무 위키, 이 블로그에서 베지어 곡선에 대해 잘 설명해준다~~

1차, 2차, 3차,.....  n차가 있는데, cubic-bezier는 3차이다. 

n개의 조절점으로 베지에 곡선을 만들면 n-1 차 베지에 곡선이라고 한다. 그러면 cubic-bezier는 4개의 조절점이 필요하다는 것이다.

그런데 두 점은 이미 정해져 있다. 시작점인 (0, 0)과 끝 점인 (1, 1)! 그래서 두 점만 정하면 된다.

출처:https://matthewlein.com/tools/ceaser

예를 들어서, 위 이미지의 검정 점 두 개가 바로 그것이다.

css 속성 cubic-bezier 에는 0~1 사이의 값 4개의 매개 변수를 넣어서 두 점의 위치를 정한다. x1, y1, x2, y2 순서이다.

CSS 애니메이션 속도를 조절할 때 사용한다. 예를 들어서 어떤 요소가 움직이거나, 요소가 등장하고 없어질 때의 속도를 정한다. 애니메이션을 보여줄 때, 처음에는 부드럽게 시작해서 나중에는 빨리 쓱!! 끝난다든지..

이 홈페이지에서 두 점의 위치에 따라서 애니메이션의 움직임이 바뀌는 걸 볼 수 있고, css 코드 스니펫도 만들어준다!

더 알고 싶다면

mdn 문서