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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Jan 12, 2022 pm 05:27 PM

css3アニメーション属性

アニメーション関連の属性には、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 までご連絡ください。

CSS：IDセレクターを使用するのは悪いですか？May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1）IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2）一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5：2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1）強化された拡張性と拡張効率化されたレンダリング.2）

HTML5が改善しようとした主な領域は何ですか？May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas：1）multimediasupport、2）セマンティクス構造、3）フォームキャピリティ、および4）offlineandstorageoptions.1）html5introduededelements、simplifiedediaembedingemencemanteddim.2）

CSS IDおよびクラス：一般的な間違いMay 13, 2025 am 12:11 AM

idsは、Javascripthooksを使用しているので、whileclasseSarebetterforstyling.1）useclassess forStylingtoEriousEREUSERESERESERESPICITYISSUES.2）USEIDSSFORIDSSSCRIPTHOOKSTOUNIQUELYIEDIENEMENTS.3）3）回避策を避けてください

クラスセレクターとIDセレクターの間の差別化とは何ですか？May 12, 2025 am 12:13 AM

classSelectorEctorSareverSatileAndReusable、whiledseLectorSareUniqueandspecific.1）useclassselectors（notedby。）forstylingMultipleElementswithsharedCharacteristics.2）useidselectors（notedby＃）forstylinguniqueeletementonapage.classselectorectorotorsoffermoreflexibili

CSS IDS対クラス：実際の違いMay 12, 2025 am 12:10 AM

idsareuniqueIdentifiersforsingleelements、whileclassesstylemultipleements.1）useidsforuniqueelementsandjavascripthooks.2）useclasses forReusable、flexiblestylingacrossmultipletements。

CSS：クラスだけを使用した場合はどうなりますか？May 12, 2025 am 12:09 AM

クラスのみのセレクターを使用すると、コードの再利用性と保守性が向上しますが、クラス名と優先順位の管理が必要です。 1.再利用性と柔軟性を向上させる、2。複数のクラスを組み合わせて複雑なスタイルを作成する3。長いクラス名と優先順位につながる可能性があります。4。パフォーマンスへの影響は小さい、5。簡潔な命名や使用規則などのベストプラクティスに従ってください。

CSSのIDおよびクラスセレクター：初心者向けガイドMay 12, 2025 am 12:06 AM

IDおよびクラスセレクターは、それぞれ一意でマルチエレメントスタイルの設定にCSSで使用されます。 1. IDセレクター（＃）は、特定のナビゲーションメニューなどの単一の要素に適しています。 2.クラスセレクター（。）は、統一ボタンスタイルなどの複数の要素に使用されます。 IDは注意して使用し、過度の特異性を避け、スタイルの再利用性と柔軟性を向上させるためにクラスに優先順位を付ける必要があります。

See all articles