ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?

CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?

青灯夜游
青灯夜游オリジナル
2021-12-10 13:38:412356ブラウズ

css3 アニメーションは「@keyframes」を使用してルールをカスタマイズします。 「@keyframes」はアニメーションルールを指定し、CSSアニメーションの一定期間の動作を定義することができます。構文は「@keyframesアニメーション名{keyframes-selector{css-styles;}}」です。

CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。

@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイル ルールのセットで構成されます。

@keyframes animation-name {keyframes-selector {css-styles;}}
  • keyframes-selector: アニメーションの割合を 0% から 100% の間で定義します。アニメーションには多くのセレクターを含めることができます。

次に、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションなど、アニメーションのさまざまな側面を制御できます。実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。

@キーフレーム ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に一連のスタイル ルール (カーリーで区切られたもの) で構成されます。ブレース) 。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。

構文:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称(在@keyframes中已经声明好的);

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

中括弧内で、アニメーション中の特定の時点でアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。

たとえば、単純なアニメーション @keyframe は次のようになります:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?

## 「0%」、「50%」、「100%」はすべてです。キーフレーム セレクター。各セレクターはキーフレーム ルールを定義します。キーフレーム ルールのキーフレーム宣言ブロックは、属性と値で構成されます。

上のアニメーションは単純なトランジション効果に似ています。背景色はアニメーションの開始時にある値 (0%) から変化し、中央の値 (50%) に達し、別の値に達します ( 100) アニメーションの最後に %)。 「0%」、「50%」、および「100%」キーフレーム セレクターは、アニメーション プロパティの値を変更するウェイポイントまたはパーセンテージ ポイントを定義します。それぞれ 0% と 100% を使用する代わりに、セレクター キーワード from と to を使用することもできます。これらは同等です。

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

キーフレーム セレクターは、1 つ以上のカンマ区切りのパーセンテージ値、または from キーワードと to キーワードで構成されます。パーセント値にはパーセント単位指定子を使用する必要があることに注意してください。したがって、「0」は無効なキーフレーム セレクターです。

以下は、複数のカンマ区切りのパーセンテージ値やキーワード キーフレーム セレクター from および to を含むキーフレーム セレクターを使用したアニメーションの例です。


@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

上記の @keyframes ルール定義: 要素の上部オフセットは、アニメーションの開始時、途中、終了時にはゼロになり、アニメーションの最初の時点ではゼロになります。 -4 分の 1 と 4 分の 3 の距離。100px; これは、アニメーション ループ中に要素が数回上下に移動することを意味します。

css @keyframes アニメーション ルールの指定例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/* Safari and Chrome */
			}

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

CSS3 アニメーションにはどのようなカスタム ルールが使用されますか?

(学習ビデオ共有:

css ビデオ チュートリアル )

以上がCSS3 アニメーションにはどのようなカスタム ルールが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。