조금 쉬운 CSS - 베지에 곡선

베지에 곡선에 대해 알아보자!

베지에 곡선

컴퓨터 그래픽 등에서 사용되는 매개변수 곡선

부드러운 곡선, 폰트, 애니메이션 부터 차체 곡선 디자인까지 많은 용도로 이용

 

cubic-bezier

베지에 곡선을 정의하는 함수

4개의 포인트(P0, P1, P2, P3)로 정의한다.

animation-timing-function: cubic-bezier(.21, .89, .87, .28)

• ease
  점점 빨라짐 -> 느려짐
  cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in
  천천히 -> 점점 빨라짐
  cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out
  빨리 -> 점점 느려짐
  cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out
  천천히 -> 빨라짐 -> 느려짐
  cubic-bezier(0.42, 0, 0.58, 1.0)
• linear
  등속
  cubic-bezier(0.0, 0.0, 1.0, 1.0)

참고할 만한 사이트 : https://cubic-bezier.com/#.17,.67,.83,.67