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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1668

CakePHP チュートリアル

1426

Laravel チュートリアル

1329

PHP チュートリアル

1273

C# チュートリアル

1256

Related knowledge

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

CSS アニメーション: 要素のフラッシュ効果を実現する方法 Nov 21, 2023 am 10:56 AM

CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。Web デザインでは、アニメーション効果がページに優れたユーザーエクスペリエンスをもたらすことがあります。グリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。 1. フラッシュの基本的な実装まず、フラッシュ効果を実現するには、CSS のアニメーションプロパティを使用する必要があります。アニメーション属性の値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間を指定する必要があります。

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

Netflixのクレイメーション映画『チキン・ラン2』の最終予告編が発表され、12月15日に公開される予定だ。 Nov 20, 2023 pm 01:21 PM

Netflix のクレイメーション映画「チキンラン 2」の最終予告編が公開されました。映画は 12 月 15 日公開予定です。当サイトは、「チキンラン 2」の予告編にチキンロキとキングコングが映っていることに気づきました。ジェイは作戦を開始します。娘のモリーを探すために。モリーはファンランド・ファームでトラックに連れ去られ、ロッキーとジンジャーは命がけで娘を取り戻そうとする。この映画はサム・フェールが監督し、サンディ・ウェイ・ニュートン、ザカリー・リーヴァイ、ベラ・ラムジー、イメルダ・スタウントン、デヴィッド・ブラッドリーが出演する。『チキンラン2』は『チキンラン』の20年以上ぶりの続編であることが分かりました。最初の作品は、2001 年 1 月 2 日に中国で公開されました。この作品は、鶏肉工場でチキンパイに変えられる運命に直面するニワトリのグループの物語です。

Python の dir() 関数: オブジェクトのプロパティとメソッドを表示する Nov 18, 2023 pm 01:45 PM

Python の dir() 関数: オブジェクトのプロパティとメソッドを表示します。特定のコードサンプルが必要です。要約: Python は強力で柔軟なプログラミング言語であり、その組み込み関数とツールは開発者に多くの便利な機能を提供します。非常に便利な関数の 1 つは dir() 関数です。これを使用すると、オブジェクトのプロパティとメソッドを表示できます。この記事では、 dir() 関数の使用法を紹介し、具体的なコード例を通じてその機能と使用法を示します。テキスト: Python の dir() 関数は組み込み関数です。

Netflixアニメシリーズ「ソニック：ホームカミング」シーズン3クリップ公開、来年公開予定 Nov 12, 2023 am 09:25 AM

Netflix 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？アニメシリーズ「ソニック: ホームカミングアドベンチャーズ」の第 3 シーズンのクリップが、2024 年に開始される予定のギークウィークで発表されました。申し訳ありませんが、内容の書き換えを手伝うことはできますが、何をしたいのかを知る必要があります。リライト。オリジナルのコンテンツ。提供してもらえますか？このサイトによると、「Sonic: Homecoming Adventure」は Sega と WildBrain によって制作されています。申し訳ありませんが、コンテンツのリライトを手伝うことはできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？ Studio 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？申し訳ありませんが、内容を書き直すのを手伝うことはできますが、必要です

宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。 Dec 18, 2023 am 08:07 AM

当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック