CSS 애니메이션 타이밍 기능 속성
번역 결과：
英[ˈtaˈməŋ ] US [ˈtaˈmˈŋ]
n.Timing; 타이밍 제어, 타이밍function
English [ˈfʌŋkʃn]ən. 변수, 함수 ; 직위, 주요 Party
vi.임무를 수행함3인칭 단수: 기능 복수: 기능 현재 분사: 기능 과거 분사: 기능CSS 애니메이션 타이밍 기능 속성통사론
애니메이션 타이밍 기능이란 무엇인가요?
animation-timing-function은 애니메이션의 속도 곡선, 즉 애니메이션이 재생되는 방식을 지정하여 애니메이션의 변화를 보다 부드럽게 만드는 데 사용되는 CSS의 애니메이션 속성입니다.
기능: animation-timing-function은 애니메이션의 속도 곡선을 지정합니다. 속도 곡선은 애니메이션이 한 CSS 스타일 세트에서 다른 CSS 스타일 세트로 변경되는 데 걸리는 시간을 정의합니다. 속도 곡선은 변경을 더 부드럽게 만드는 데 사용됩니다.
구문: animation-timing-function: value;
설명: animation-timing-function은 Cubic Bezier 함수라는 수학 함수를 사용하여 속도 곡선을 생성합니다.
이 함수에는 사용자 고유의 값을 사용할 수도 있고 미리 정의된 값을 사용할 수도 있습니다.
linear 애니메이션의 속도는 처음부터 끝까지 동일합니다.
기본값을 완화하세요. 애니메이션은 느린 속도로 시작한 다음, 속도가 빨라지고, 끝나기 전에 느려집니다.
ease-in 애니메이션이 느린 속도로 시작됩니다.
ease-out 애니메이션이 느린 속도로 끝납니다.
ease-in-out 애니메이션은 느린 속도로 시작하고 끝납니다.
cubic-bezier(n,n,n,n)는 큐빅-베지어 함수에서 자체 값입니다. 가능한 값은 0부터 1까지의 숫자값이다.
참고: Internet Explorer 9 및 이전 버전은 animation-timing-function 속성을 지원하지 않습니다.
CSS 애니메이션 타이밍 기능 속성예
<!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>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요