CSS3에서 키프레임의 사용법은 무엇입니까
- WBOY원래의
- 2021-12-15 17:36:108494검색
CSS의 키프레임은 애니메이션을 생성하기 위한 CSS 규칙입니다. 키프레임 규칙은 "@keyframe" 키워드로 구성되며 구문은 "@keyframes 애니메이션 이름{keyframes-selector{css"입니다. -스타일;} }".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 키프레임의 용도는 무엇인가요?
이 속성은 애니메이션 속성과 밀접한 관련이 있습니다.
키프레임을 중국어로 번역하면 "키프레임"이라는 뜻입니다. 물론 플래시를 사용해 본 사람이라면 이 점을 더 잘 이해해야 합니다.
전환 애니메이션 효과는 전환 속성을 사용하여 얻을 수도 있지만 애니메이션 프로세스를 더 정확하게 제어할 수 없기 때문에 약간 거칠습니다. 예를 들어 특정 속성 내에서 전체적으로 전환만 제어할 수 있습니다. time period, animation 속성은 @keyframes를 사용하여 지정된 기간 내에서 애니메이션을 보다 정확하게 나눌 수 있습니다.
문법 구조:
@keyframes animationname {keyframes-selector {css-styles;}}매개변수 분석:
animationname: 애니메이션의 이름을 선언합니다.
keyframes-selector: 애니메이션 기간을 나누는 데 사용되며, 백분율 형식을 사용하거나 "from" 및 "to" 형식을 사용할 수 있습니다. "from" 및 "to" 형식은 0% 및 100%와 동일합니다. 항상 백분율 형식을 사용하는 것이 좋습니다.
예제는 다음과 같습니다:
<!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>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>출력 결과:
관심이 있으시면 계속해서 css 비디오 튜토리얼을 방문하실 수 있습니다.
위 내용은 CSS3에서 키프레임의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!