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

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

青灯夜游

リリース： 2022-03-15 17:26:34

オリジナル

3009 人が閲覧しました

アニメーション関連の属性には、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


		例: