ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3にはトランジションプロパティがいくつありますか?

css3にはトランジションプロパティがいくつありますか?

青灯夜游オリジナル: 2021-12-14 17:20:162171ブラウズ

1.transition-property属性、2.transition-duration属性、3.transition-timing-function属性、4.transition-delay属性、5.transition属性の5つがあります。

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

css3 トランジションを使用すると、限られた時間内で 1 つの属性値から別の属性値に変更できます。

css3 トランジション属性は 5 つあります:

Attribute	Description	CSS
transition	省略属性。1 つの属性に 4 つの遷移属性を設定するために使用されます。	3
transition-property	トランジションを適用する CSS プロパティの名前を指定します。	3
transition-duration	トランジション効果にかかる時間を定義します。デフォルトは 0 です。	3
transition-timing-function	トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。	3
transition-lay	トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。	3

例:

すべての遷移プロパティを 1 つの例で使用します:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				transition-property: width;
				transition-duration: 1s;
				transition-timing-function: linear;
				transition-delay: 2s;
				/* Safari */
				-webkit-transition-property: width;
				-webkit-transition-duration: 1s;
				-webkit-transition-timing-function: linear;
				-webkit-transition-delay: 2s;
			}

			div:hover {
				width: 200px;
			}
		</style>
	</head>
	<body>

		<div></div>

		<p>鼠标移动到 div 元素上，查看过渡效果。</p>
		<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

	</body>
</html>

css3にはトランジションプロパティがいくつありますか?

上記の例と同じトランジション効果ですが、短縮されたトランジション属性を使用しています:

上記の例の div{} には非常に多くのトランジションコードがあります

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

実際には、短縮された遷移属性を使用し、2 行のコードを使用するだけで実行できます:

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

(学習ビデオ共有: css ビデオチュートリアル )

以上がcss3にはトランジションプロパティがいくつありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 Property function transition

声明：

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

前の記事：css3複合属性とは何ですか次の記事：css3複合属性とは何ですか

続きを見る