CSS3 アニメーションにはどのようなカスタムルールが使用されますか?-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-12-10 13:38:41

オリジナル

2353 人が閲覧しました

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 アニメーションにはどのようなカスタムルールが使用されますか?