CSS3 アニメーションに関連する 4 つのプロパティは何ですか?-フロントエンドQ&A-php.cn

CSS3 アニメーションに関連する 4 つのプロパティは何ですか?

青灯夜游

リリース： 2022-01-17 18:49:45

オリジナル

2191 人が閲覧しました

css3 は、アニメーションに関連する 4 つの属性を設定します: 1. Transform 属性、要素に 2D または 3D 変換を適用するために使用されます; 2. Transition 属性、トランジション効果を実現するために使用されます; 3. アニメーション属性、要素にバインドを与えるために使用されます。アニメーション; 4. 「@keyframes」はアニメーションのサイクルの動作を定義します。

CSS3 アニメーションに関連する 4 つのプロパティは何ですか?

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

一般に、CSS3 アニメーションのプロパティは、transform、transition、アニメーションの 3 つだけです。

transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

transition このプロパティは、4 つの遷移プロパティを設定するための短縮プロパティです。

transition-property
transition-duration
#transition-timing-function

#animation

このプロパティは、6 つのアニメーションプロパティを設定するための短縮プロパティです: <strong></strong>

animation-name

animation-duration
animation-timing-function
animation-delivery
animation-iteration-count
animation-direction
## アニメーション属性は @keyframes ルールと一緒に使用する必要があります。アニメーションを作成します。

@keyframes

ルール<strong></strong>@keyframes ルールを使用すると、アニメーションを作成できます。アニメーション作成の原則は、ある CSS スタイルセットを別のスタイルセットに徐々に変更することです。

この CSS スタイルのセットは、アニメーションプロセス中に複数回変更できます。

変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。

0% はアニメーションの開始時間、100% はアニメーションの終了時間です。

ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。

<!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>

ログイン後にコピー

（学習ビデオ共有:

css ビデオチュートリアル CSS3 アニメーションに関連する 4 つのプロパティは何ですか? ）