CSS 큐빅 베지어 생성기

CSS Cubic Bezier Generator 여유 함수 만들기

제어점

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

인기 있는 이징 사전 설정

CSS 출력

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

베지어 곡선 시각화

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

큐빅 베지어 문서

입방 베지어 곡선이란 무엇입니까?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS 구문

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

일반적인 사용 사례

  • 애니메이션 전환:속성을 변경하는 요소에 대한 부드러운 애니메이션을 만듭니다.
  • 스크롤 효과:스크롤 애니메이션의 속도를 제어합니다.
  • 인터랙티브 요소:요소가 호버링 또는 클릭과 같은 사용자 상호 작용에 응답하는 방식을 정의합니다.
  • 모션 디자인:UI 요소에 대한 복잡한 모션 시퀀스를 제작할 수 있습니다.

인기 있는 easing 함수

Ease (default)

느리게 시작하고, 빠르게 가속하고, 다시 느려집니다.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

처음부터 끝까지 일정한 속도.

cubic-bezier(0, 0, 1, 1)

Ease-in

천천히 시작하여 가속합니다.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

빠르게 시작한 다음 감소합니다.

cubic-bezier(0, 0, 0.58, 1)

사용자 정의 곡선을 만들기 위한 팁

  1. x 값을 0과 1 사이로 유지:이 범위를 벗어나면 예기치 않은 동작이 발생할 수 있습니다.
  2. 곡선 시각화:대화형 그래프를 사용하여 변경 사항이 애니메이션에 미치는 영향을 이해할 수 있습니다.
  3. 실제 요소로 테스트:항상 실제 UI 컴포넌트로 곡선을 미리 보고 제대로 느껴지는지 확인하세요.
  4. 사전 설정 저장:향후 프로젝트에 유용한 곡선을 책갈피로 지정합니다.

Related Tools

스타일러스를 CSS로 변환

SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.

CSS3 전환 생성기

부드러운 불투명도 전환

Sass to CSS 변환기

Sass 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.

JavaScript 난독 화기

강력한 난독화 도구를 사용하여 무단 액세스 및 리버스 엔지니어링으로부터 JavaScript 코드를 보호하십시오. 전체 기능을 유지하면서 코드를 읽을 수 없는 형식으로 변환합니다.

CSS를 LESS로 변환

변수, 중첩 등을 사용하여 CSS 코드를 LESS로 변환하십시오. 빠르고, 쉽고, 안전합니다.

CSS 변환기에 덜

Less 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.