css中keyframes是什麼意思-css教學-PHP中文網

首頁

web前端

css教學

css中keyframes是什麼意思

青灯夜游

Feb 25, 2021 am 10:51 AM

csskeyframes

在css中，keyframes的意思為“關鍵幀”，是一種創建動畫的css規則，它可以定義一個CSS動畫的一個週期的行為；可通過沿動畫序列建立關鍵幀來指定動畫序列循環期間的中間步驟，語法「@keyframes animation-name {keyframes-selector {css-styles;}}」。

css中keyframes是什麼意思

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css中keyframes是什麼意思

CSS @keyframes規則

@keyframes規則用於指定動畫規則，定義一個CSS動畫的一個週期的行為。

定義動畫，必須從@keyframes規則開始。 @keyframe規則由關鍵字“@keyframes”組成，後面跟著一個標識符，給出動畫的名稱（將使用animation-name引用），然後是一組樣式規則（用大括號分隔）。然後，透過使用識別碼作為「animation-name」屬性的值，將動畫套用到元素。

語法：

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

說明：

建立動畫的原理是，將一套 CSS 樣式逐漸變更為另一套樣式。在動畫過程中，您能夠多次改變這套 CSS 樣式。以百分比來規定改變發生的時間，或透過關鍵字 "from" 和 "to"，等價於 0% 和 100%。 0% 是動畫的開始時間，100% 動畫的結束時間。為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

註解：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

css中keyframes是什麼意思

範例：

<!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中keyframes是什麼意思