바운스 스타일 CSS 이징 곡선
두 개의 제어점을 드래그하여 사용자 정의 CSS Cubic-bezier() 타이밍 함수를 디자인하고 선형 참조에 대해 실시간으로 미리 본 다음 준비된 값을 복사합니다.
처리 중...
0%
결과
이 페이지에서는 x1=0.68, y1=-0.55, x2=0.265, y2=1.55가 이미 로드된 생성기를 엽니다. 일부 이징 라이브러리에는 escapeOutBack이라는 레이블이 붙은 오버슈트 곡선이 있습니다. 음수 y1과 1보다 큰 y2는 아래 애니메이션 미리보기가 시작 및 끝을 지나 안정되기 전에 뒤로 물러나는 이유입니다. 핸들을 드래그하거나 숫자를 편집하여 효과를 더 강하거나 부드럽게 만드세요.
이것이 무엇인지 솔직하게 말하면, 단일 입방 베지어() 곡선에는 제어점이 두 개만 있으므로 여러 개의 감소하는 홉이 있는 실제 다중 바운스 물리적 바운스가 아니라 하나의 오버슈트 및 정착 모션에 근접할 수 있습니다. 문자 그대로 볼 바운스 효과를 얻으려면 여러 개의 키프레임이나 steps() 세그먼트가 서로 연결되어 있어야 합니다. 이 곡선은 일반 전환 타이밍 기능이 한 줄에서 얻을 수 있는 가장 가까운 곡선입니다.
그 단일 오버슛은 여전히 대부분의 탄력 있는 UI가 원하는 것입니다. 정지 크기를 약간 넘어서 튀어나오는 버튼, 고정되기 전에 오버슛하는 모달, 제자리에 튀어오르는 카드입니다. 빠른 느낌을 위해 값을 있는 그대로 복사하거나 y1을 0 쪽으로, y2를 1 쪽으로 부드럽게 하여 오버슈트를 되돌립니다.