Loading…
cubic-bezier 이징 곡선을 조정하여 CSS transition-timing-function을 생성합니다.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
네 개의 제어점(x1, y1, x2, y2)을 조정하여 베지어 곡선을 만듭니다. y 값을 0 미만이나 1 초과로 설정하면 오버슈트 효과가 됩니다.
애니메이션의 가속·감속 정도를 4개의 제어 값(두 개의 좌표점)으로 표현하는 이징 함수입니다. transition-timing-function에 지정하면 움직임의 완급을 자유롭게 조절할 수 있습니다.
곡선을 조절하면 cubic-bezier(...) 값이 출력되므로, CSS의 transition-timing-function이나 animation-timing-function에 그대로 붙여넣어 사용하세요.
ease, ease-in, ease-out, ease-in-out 등 자주 쓰이는 대표적인 이징을 프리셋으로 제공합니다. 프리셋을 기준으로 미세 조정해 원하는 움직임을 만들 수 있습니다.