CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS 삼각-bezier() 함수

온라인 예제

시작에서 끝까지 다른 속도로 이동 효과:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 튜토리얼(oldtoolbag.com)</title>
<style>　
div {
　　width:　100px;
　　height:　100px;
　　background: red;
　　transition: width　2s;
　　transition-timing-function: cubic-bezier(0.1, 0.7,　1.0, 0.1);
}
div:hover　{
　　width:300px;
}
</style>
</head>
<body>
<h1>cubic-bezier() 함수</h1>
<p>div 요소에 마우스를 가져가서 효과를 확인하세요.</p>
<div></div>
<p><b>주의:</b>Internet Explorer　9　그리고 이 이전 버전의 브라우저는 이 효과를 지원하지 않습니다.</p>
</body>
</html>

테스트를 보세요. ‹/›

정의와 사용법

cubic-bezier() 함수는 베塞尔 곡선(Cubic Bezier)을 정의합니다.

베塞尔 곡선 곡선은 네 개의 점 P0, P1와 P2 와 P3 정의.3 는 곡선의 시작점과 끝점입니다. P0은 (0,0)으로 초기 시간과 초기 상태를 나타냅니다. P3는1,1）은 최종 시간과 최종 상태를 나타냅니다.

위의 그림에서 알아야 할 것은 cubic-bezier의 값 범위:

P0: 기본 값 (0, 0)
P1동적 값 (x1기본 값 (0,1)
P2동적 값 (x2기본 값 (0,2)
P3기본 값 (1,　1)

우리가 주의해야 할 것은 P1 와 P2 두 점의 값, 그리고 X축의 값 범위는 0에서 1범위를 벗어났을 때 cubic-bezier는 비활성화됩니다; Y축의 값은 지정되지 않았으며, 자연스럽게도 크지 않아야 합니다.

가장 직관적인 이해는, 범위가 작은 1 축에 있으며, 중간에서 두 점을 꺼내서 끌어당겨야 합니다. (X축의 값 범위는 [0, 1], Y축의 어떤 값도 가능), 최종로 형성된 곡선은 애니메이션의 속도 곡선입니다.

cubic-bezier()는 사용할 수 있습니다. animation-timing-function 　와 transition-timing-function 속성.

지원 버전: CSS3

브라우저 호환성

표의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

함수
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

CSS 문법

cubic-bezier(x1,y1,x2,y2)

값	설명
x1,y1,x2,y2	필수. 숫자 값, x1 x와2 필수는 0에서 1 의 숫자.

CSS 함수

CSS @charset 규칙 CSS 함수(Function)