CSS Ease-In-Out 이면의 실제 숫자
두 개의 제어점을 드래그하여 사용자 정의 CSS Cubic-bezier() 타이밍 함수를 디자인하고 선형 참조에 대해 실시간으로 미리 본 다음 준비된 값을 복사합니다.
처리 중...
0%
결과
이 페이지는 x1=0.42, y1=0, x2=0.58, y2=1이 이미 로드된 3차 베지어 생성기를 엽니다. 이는 CSS Ease-in-Out 키워드가 확장되는 정확한 제어 지점입니다. 핸들을 드래그하거나 숫자를 직접 편집하면 곡선, 애니메이션 미리보기 및 복사 가능한 문자열이 모두 즉시 업데이트됩니다.
easy-in-out은 내장된 5가지 CSS 타이밍 키워드 중 하나이며, 이 곡선이 처음부터 완만하게 가속되고, 중간에서 상당히 균일한 속도를 유지하고, 끝이 되기 전에 다시 천천히 내려가기 때문에 인기가 높습니다. 이 모양은 대부분의 UI 동작에 자연스럽게 읽히는 모양입니다. 키워드 이름 대신 명시적인 제어점으로 보면 그 이유가 분명해집니다. y1은 0 근처에 있고 y2는 1 근처에 있는데 둘 다 일치하는 x에 가깝기 때문에 어느 방향으로든 오버슈트가 없습니다.
느낌을 약간 조정해야 할 때마다 키워드 자체보다는 이 4개의 숫자를 시작점으로 사용하십시오. 더 빠른 시작을 위해 x1을 아래로 당기거나 y2를 1 위로 밀어 동일한 모양을 완만한 오버슈트로 바꾸십시오. 모든 변경 사항은 미리보기와 복사 가능한 큐빅 베지어() 라인을 즉시 업데이트합니다.