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

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

青灯夜游
青灯夜游オリジナル
2022-01-12 17:27:572954ブラウズ

アニメーション関連の属性には、transform、transform-origin、transition、「@keyframes」、アニメーション、アニメーション名、アニメーション期間、アニメーション遅延などが含まれます。

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

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

#css3 のアニメーションには、transform、transition、animationの 3 種類があります。

1、transform (2D/3D 変換属性)

#プロパティ変換transform-origintransform-styleパースペクティブperspective-originbackface-visibility
説明 CSS
2D または 3D 変換に適した要素 3
変換要素の位置を変更できます 3
3D 空間で要素をネストする方法を指定します 3
3D 要素がパースでどのように表示されるかを指定します 3
3D 要素の下部の位置を指定しますelement 3
画面に面していないときに要素を表示するかどうかを定義します 3

2.transition (遷移属性)

Attributetransitiontransition-propertytransition-durationtransition-timing-functiontransition-lay
Description CSS
このプロパティは、transition-property、transition-duration、transition-timing-functionの略です。 、移行遅延フォーム。 3
トランジションに使用する CSS プロパティを設定します。 3
トランジションの時間の長さを設定します。 3
トランジションのタイミング関数を設定します。 3
トランジションが開始される時刻を指定します。 3

3. アニメーション (アニメーション属性)

属性@keyframesanimationanimation-name#3animation-durationオブジェクト アニメーションの継続時間を取得または設定します3オブジェクトアニメーションの遷移タイプを取得または設定しますオブジェクト アニメーションの遅延時間を取得または設定します##animation-iteration-countオブジェクト アニメーションのループ時間の取得または設定3animation-directionオブジェクト アニメーションが移動するかどうかの取得または設定ループ内の逆方向3animation-play-stateオブジェクトアニメーションの状態を取得または設定します 3
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>
説明 CSS
アニメーションを定義します。アニメーションは @ で定義されます。 keyframes 名前はアニメーション名で使用されます。 3
複合属性。オブジェクトに適用されるアニメーション効果を取得または設定します。 3
オブジェクトに適用されるアニメーション名を取得または設定します。これはルール @keyframes と組み合わせて使用​​する必要があります。アニメーション名は @keyframes 定義によって決定されるため、
##animation-timing-function
3 animation-lay
3
例:

(学習ビデオ共有:

css ビデオ チュートリアル

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

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

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