Cubic-bezier()는 CSS에 있습니까?

cubic-bezier()는 두 개의 컨트롤 포인트(x1, y1, x2, y2)를 사용하여 전환 및 애니메이션에 대한 사용자 정의 상승 곡선을 정의합니다. 그것은 시간이 지남에 애니메이션의 속도를 제어, 당신이 내장 된 쉽게, 쉽게에서, 쉽게 밖으로 키워드를 통해 효과를 만들 수.

왜 Y 값이 0 이상 또는 1 이상으로 갈 수 있습니까?

X 값은 0–1으로 클램핑되어 시간이 뒤로 달릴 수 없기 때문에, Y 값은 0–1 범위에서 오버포팅 및 예상을 만들 수 있습니다. 이것은 'back'과 'bounce'가 간략하게 이전 또는 설정하기 전에 대상을 이동하는 방법입니다.

어떻게 생성 된 곡선을 사용합니까?

Cubic-bezier() 값을 변환 또는 애니메이션 선언으로 복사합니다. 예를 들어: 전환: 모든 0.3s 입방 방위(0.42, 0, 0.58, 1);. 발전기는 또한 당신에게 직접 풀 수 있는 준비되어 있는 전이 기능을 출력합니다.

CSS Cubic Bezier Easing 생성기

Craft CSS cubic-bezier easing curves by dragging control point and watch easing play live, 다음 타이밍 기능을 복사합니다.

Drag the control points

x1 y1 x2 y2

Presets

Animation preview

CSS

Was this tool helpful?

Send output to:

How to use Cubic Bezier Generator

곡선에 파란색과 분홍색 컨트롤 포인트를 드래그하거나 x1, y1, x2, y2 값을 입력으로 입력합니다.
쉽게 밖으로 또는 쉽게 아웃 백과 같은 사전 설정을 클릭하여 일반 또는 과잉 곡선을로드하십시오.
당신의 상승과 함께 도트를보고, 재생을 눌러, 다음 복사 CSS cubic-bezier 규칙을 잡아.

큐빅 베지에 생성기은 무엇입니까?

Cubic Bezier Generator는 CSS 상승 곡선을 위한 대화형 편집기입니다. Unit-square 곡선의 두 가지 제어 포인트를 드래그하여 애니메이션이 가속화하고 decelerates하는 방법을 모양으로 한 다음 정확한 cubic-bezier() 값을 4개의 숫자 입력으로 다시 입력하거나 핸들을 이동하기 위해 입력값을 직접 입력합니다.

Control-point Y 값은 0과 1을 넘어 이동할 수 있으므로 백과 반송 효과와 같은 과잉 및 기대를 구축할 수 있습니다. 내장 애니메이션 미리보기는 transition-timing-function로 곡선을 사용하여 트랙에서 도트를 이동하여 값을 변경하거나 재생할 때마다 자동으로 재생합니다.

모든 계산은 브라우저에서 발생합니다. 곡선이 맞을 때, CSS로 준비된 타이밍 기능 라인을 복사합니다.

FAQ

Cubic-bezier()는 CSS에 있습니까?: cubic-bezier()는 두 개의 컨트롤 포인트(x1, y1, x2, y2)를 사용하여 전환 및 애니메이션에 대한 사용자 정의 상승 곡선을 정의합니다. 그것은 시간이 지남에 애니메이션의 속도를 제어, 당신이 내장 된 쉽게, 쉽게에서, 쉽게 밖으로 키워드를 통해 효과를 만들 수.
왜 Y 값이 0 이상 또는 1 이상으로 갈 수 있습니까?: X 값은 0–1으로 클램핑되어 시간이 뒤로 달릴 수 없기 때문에, Y 값은 0–1 범위에서 오버포팅 및 예상을 만들 수 있습니다. 이것은 'back'과 'bounce'가 간략하게 이전 또는 설정하기 전에 대상을 이동하는 방법입니다.
어떻게 생성 된 곡선을 사용합니까?: Cubic-bezier() 값을 변환 또는 애니메이션 선언으로 복사합니다. 예를 들어: 전환: 모든 0.3s 입방 방위(0.42, 0, 0.58, 1);. 발전기는 또한 당신에게 직접 풀 수 있는 준비되어 있는 전이 기능을 출력합니다.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Cubic Bezier Generator on Wikipedia·Developer Tools on Wikipedia·Cubic Bezier Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Cubic Bezier Easing 생성기

Something went wrong

How to use Cubic Bezier Generator

큐빅 베지에 생성기은 무엇입니까?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts