cubic-bezier란?
cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다.
#target{ transition: all 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75); } | cs |
그래서 그게 뭔데?
베지어 곡선(bezier curves) 이라는 것이 있다. 아래에 위키피디아 소개를 번역해봤다.
베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전히 포함되어 있기 때문에 점을 그래픽으로 표시하고 직관적으로 커브를 조작하는 데 사용할 수 있다. 변환 및 회전과 같은 어피니션 변환은 곡선의 제어점에 각각의 변환을 적용하여 곡선에 적용 할 수 있다.
요약하면 모델링에 사용하는 곡선모델이라고 할 수 있을 것 같다.
말은 어렵지만 아래 그림을 보면 대충 감은 온다.
cubic-bezier() 는 이 베지어곡선을 정의하는 거라고 이해하면 된다.
(4개의 컨트롤 포인트를 가지는 Cubic-bezier curve)
cubic-bezier()의 4개 파라미터는 각각 위의 p0, p1, p2, p3를 의미한다.
뭔 말이지..
사실 위의 설명은 하나도 도움이 안 되는 것 같다. (^^;)
그러니까, transition 속성을 사용 할 때 아래와 같은 값을 부여했으면
#target{ transition: width 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75); } | cs |
- 해당 엘리먼트의 width를
- 0.5초 동안 제어하되
- 4개의 컨트롤 포인트(0.25, 0.25, 0.75, 0.75)를 가지는 cubic-bezier curve에 의거해 효과를 주겠다
라는 뜻이다.
그래프를 그려보면 아래와 같은데, 일정한 속도로 진행됨을 예상할 수 있다.
직접 마우스를 올려보자.
예상처럼 균등한 속도로 너비가 변화하는 것을 볼 수 있다.
사용
일일이 저런 그래프를 그려보는 것도 아니고..
그래서 기본적으로 선언되어있는 5가지 값이 있다.
cubic-bezier() function 대신 키워드를 넣으면 된다.
ease(default)
기본값으로, (0.25, 0.1, 0.25, 1.0) 의 값을 가진다.
처음과 끝은 상대적으로 느리게, 중간은 빠르게.
linear
위에서 설명한 것으로 직선 모양이다.
(0.25, 0.25, 0.75, 0.75) 값을 가진다.
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) 이다.
백문이 불여일견. 직접 비교해보자.
팁
지금까진 개발자도구에서 숫자 바꿔보면서 노가다했는데,
아래 사이트에서 직접 그래프를 조절하면서 코드로 받아낼 수 있다.
사실 위에 장황하게 설명해놓은거 몰라도 여기서 그냥 해보면 무슨 의미인지 다 알게 된다. ㅠㅠ
