CSSにおけるキーフレームの意味-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSにおけるキーフレームの意味

青灯夜游

Feb 25, 2021 am 10:51 AM

csskeyframes

CSS では、キーフレームとは「キーフレーム」を意味し、アニメーションを作成するための CSS ルールです。CSS アニメーションの期間の動作を定義できます。アニメーションシーケンスに沿ってキーフレームを設定することで指定できます。アニメーションシーケンスループ中の中間ステップ、構文「@keyframes アニメーション名 {keyframes-selector {css-styles;}}」。

CSSにおけるキーフレームの意味

このチュートリアルの動作環境: Windows 7 システム、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におけるキーフレームの意味 #[推奨チュートリアル: