css3のトランジションプロパティは何種類あるのでしょうか？-フロントエンドQ&A-php.cn

css3のトランジションプロパティは何種類あるのでしょうか？

青灯夜游

リリース： 2022-03-18 16:58:16

オリジナル

3204 人が閲覧しました

css3 トランジションプロパティには、1. トランジション、2. トランジションプロパティ、3. トランジション期間、4. トランジションタイミング関数、5. トランジション遅延の 5 種類があります。

css3のトランジションプロパティは何種類あるのでしょうか？

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

CSS トランジションを使用すると、一定期間にわたってプロパティ値をスムーズに変更できます。

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

CSS3 トランジションは、要素があるスタイルから別のスタイルに徐々に変化する効果です。

これを実現するには、2 つのことを指定する必要があります。

効果を追加する CSS プロパティを指定します。
効果持続時間。

例:

<!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のトランジションプロパティは何種類あるのでしょうか？