CSS3 애니메이션 타이밍 기능 속성
번역 결과：
英[ˈtaˈməŋ ] US [ˈtaˈmˈŋ]
n.Timing; 타이밍 제어, 타이밍function
English [ˈfʌŋkʃn]ən. 변수, 함수 ; 직위, 주요 Party
vi.임무를 수행함3인칭 단수: 기능 복수: 기능 현재 분사: 기능 과거 분사: 기능CSS3 애니메이션 타이밍 기능 속성통사론
기능: animation-timing-function은 애니메이션의 속도 곡선을 지정합니다. 속도 곡선은 애니메이션이 한 CSS 스타일 세트에서 다른 CSS 스타일 세트로 변경되는 데 걸리는 시간을 정의합니다. 속도 곡선은 변경을 더 부드럽게 만드는 데 사용됩니다.
구문: animation-timing-function: value;
설명: animation-timing-function은 Cubic Bezier 함수라는 수학 함수를 사용하여 속도 곡선을 생성합니다. 이 함수에서는 사용자 고유의 값을 사용할 수도 있고 미리 정의된 값을 사용할 수도 있습니다. 선형 애니메이션의 속도는 처음부터 끝까지 동일합니다. 완화 기본값. 애니메이션은 느린 속도로 시작한 다음, 속도가 빨라지고, 끝나기 전에 느려집니다. 이즈인 애니메이션이 느린 속도로 시작됩니다. Ease-out 애니메이션이 느린 속도로 종료됩니다. Ease-in-out 애니메이션은 느린 속도로 시작하고 끝납니다. 큐빅 베지어(n,n,n,n)는 큐빅 베지어 함수에서 자체 값입니다. 가능한 값은 0부터 1까지의 숫자값이다.
참고: Internet Explorer 9 및 이전 버전은 animation-timing-function 속성을 지원하지 않습니다.
CSS3의 animation-timing-function 속성을 사용하여 애니메이션 속도를 사용자 정의할 수 있습니다. 애니메이션 속도를 일정한 속도로 설정하고, 낮은 속도로 시작하고, 낮은 속도로 끝내고, 느린 속도로 시작하고 끝낼 수 있습니다. 먼저 속도를 높인 다음 속도를 늦추거나 직접 값을 설정하세요
.CSS3 애니메이션 타이밍 기능 속성예
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>
<div></div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요