CSS에서 키프레임은 무엇을 의미하나요?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 키프레임은 무엇을 의미하나요?

青灯夜游

Feb 25, 2021 am 10:51 AM

csskeyframes

CSS에서 키프레임은 애니메이션 생성을 위한 CSS 규칙인 "키프레임"을 의미합니다. 키프레임은 CSS 애니메이션 주기의 동작을 정의할 수 있습니다. 애니메이션 시퀀스. 중간 단계의 구문은 "@keyframes animation-name {keyframes-selector {css-styles;}}"입니다.

CSS에서 키프레임은 무엇을 의미하나요?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 키프레임은 무엇을 의미하나요?

CSS @keyframes 규칙

@keyframes 규칙은 애니메이션 규칙을 지정하고 CSS 애니메이션 주기의 동작을 정의하는 데 사용됩니다.

애니메이션을 정의하려면 @keyframes 규칙으로 시작해야 합니다. @keyframe 규칙은 "@keyframes" 키워드, 애니메이션 이름을 제공하는 식별자(animation-name을 사용하여 참조됨), 스타일 규칙 세트(중괄호로 구분)로 구성됩니다. 그런 다음 식별자를 "animation-name" 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다.

구문:

@keyframes animation-name {keyframes-selector {css-styles;}}

설명:

애니메이션을 만드는 원리는 한 CSS 스타일 세트를 다른 스타일 세트로 점진적으로 변경하는 것입니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경이 발생하는 시점을 백분율로 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 정의해야 합니다.

참고: 애니메이션 속성을 사용하여 애니메이션 모양을 제어하고 애니메이션을 선택기에 바인딩하세요.

CSS에서 키프레임은 무엇을 의미하나요?

예:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
		@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
		body {
			background-color: #F5F5F5;
			color: #555;
			font-size: 1.1em;
			font-family: &#39;Gentium Basic&#39;, serif;
		}
		
		.container {
			margin: 50px auto;
			min-width: 320px;
			max-width: 500px;
		}
		
		.text {
			font-size: 3em;
			font-weight: bold;
			color: #0099cc;
			-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
			transform-origin: left center;
			-webkit-animation: fall 4s infinite;
			animation: fall 4s infinite;
		}
		
		@-webkit-keyframes fall {
			from,
			15% {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
				animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
			}
			50%,
			60% {
				-webkit-transform: rotate(90deg) translateX(0);
				transform: rotate(90deg) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
				animation-timing-function: cubic-bezier(.13, .84, .82, 1);
			}
			85%,
			to {
				-webkit-transform: rotate(90deg) translateX(200px);
				transform: rotate(90deg) translateX(200px);
				opacity: 0;
			}
		}
		
		@keyframes fall {
			from,
			15% {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
				animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
			}
			50%,
			60% {
				-webkit-transform: rotate(90deg) translateX(0);
				transform: rotate(90deg) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
				animation-timing-function: cubic-bezier(.13, .84, .82, 1);
			}
			85%,
			to {
				-webkit-transform: rotate(90deg) translateX(200px);
				transform: rotate(90deg) translateX(200px);
				opacity: 0;
			}
		}
	</style>
</head>

<body style="text-align: center">
	<div class="container">
		<p class="text">Falling Text</p>
	</div>
</body>

</html>

렌더링:

CSS에서 키프레임은 무엇을 의미하나요?