ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 アニメーションに関連する 4 つのプロパティは何ですか?

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

青灯夜游
青灯夜游オリジナル
2022-01-17 16:02:282138ブラウズ

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

  • ##transition-lay
#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 つのプロパティは何ですか?

以上がCSS3 アニメーションに関連する 4 つのプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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