CSS3에서 애니메이션 회전 속도를 설정하는 방법
- WBOY원래의
- 2022-04-28 16:32:122841검색
CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 요소{animation-timing-function: 속도 속성 값;}".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 애니메이션 회전 속도를 설정하는 방법
animation-timing-function은 애니메이션이 사이클을 완료하는 방법을 지정합니다.
속도 곡선은 애니메이션이 한 CSS 스타일 세트에서 다른 CSS 스타일 세트로 변경되는 데 걸리는 시간을 정의합니다.
속도 곡선은 변경을 더 부드럽게 만드는 데 사용됩니다.
기본값: easy
구문은:
animation-timing-function: value;
애니메이션 타이밍 함수에서 사용하는 수학 함수를 3차 베지어 곡선, 속도 곡선이라고 합니다. 이 기능을 사용하면 고유한 값을 사용하거나 미리 정의된 값 중 하나를 사용할 수 있습니다.
속성 값은 다음과 같습니다.
linear 애니메이션의 속도는 처음부터 끝까지 동일합니다.
기본값을 테스트해 보세요. 애니메이션은 느린 속도로 시작한 다음, 속도가 빨라지고, 끝나기 전에 느려집니다. 테스트
ease-in 애니메이션이 낮은 속도로 시작됩니다. 테스트
ease-out 애니메이션이 느린 속도로 종료됩니다. 테스트
ease-in-out 애니메이션이 느린 속도로 시작하고 종료됩니다. Test
steps(int,start|end)는 시간 함수의 간격(단계) 수를 지정합니다. 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 함수의 간격 수를 지정하며, 이는 양의 정수(0보다 큼)입니다. 두 번째 매개 변수는 선택 사항이며 애니메이션이 기간의 시작 또는 끝에서 연속되는지 여부를 나타냅니다. 의미는 다음과 같습니다. start: 직접 시작한다는 의미입니다. end: 기본값, 갑작스러운 종료를 나타냅니다.
cubic-bezier(n,n,n,n)은 큐빅-베지어 함수에서 자체 값입니다. 가능한 값은 0부터 1까지의 숫자값이다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s;
animation-timing-function:ease-in-out;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
.div2{
width:100px;
height:100px;
background-color:pink;
animation:fadenums 5s;
animation-timing-function:linear;
}
@keyframes fadenums{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="div1"></div><br><br>
<div class="div2"></div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 애니메이션 회전 속도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!