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

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

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

html5 css css3 count 循环 Property function 对象 transform transition @keyframes animation

声明：

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

前の記事：非常に実用的なJavaScriptの一行コード33個、集めておくのがおすすめ！次の記事：非常に実用的なJavaScriptの一行コード33個、集めておくのがおすすめ！

続きを見る