css3にはトランジションプロパティがいくつありますか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2021-12-15 13:39:42

オリジナル

2156 人が閲覧しました

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

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

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