CSS3 トランジションtransition-property プロパティ

構文:

transition-property：all | none | <property>[ ,<property> ]*

パラメータ分析:
1.all: 遷移可能なすべてのプロパティを設定します。
2.none: 遷移できる属性を指定しません。
3.<property>: 遷移できるプロパティを指定します。
特別な指示:
1. 複数の属性を設定する場合は、属性名をカンマで区切ります。
2. 対応するスクリプトプロパティはtransitionPropertyです。

transition-property は、要素の属性の 1 つが変更されたときに実行されるトランジション効果を指定するために使用されます。これには、主に次の値があります: none (属性は変更されない)、all (すべての属性が変更される)。デフォルト値; インデント (要素の属性名)。値が none の場合、all に指定すると、要素の属性値が変更されたときに遷移効果が実行されます。要素の特定の属性値を指定できます。対応するタイプは次のとおりです:

1. カラー: 背景色、境界線色、色、輪郭色、その他の CSS 属性などの、赤、緑、青、透明度のコンポーネントを通じて変換されます (各数値は処理されます)。 ;

2 、長さ: 単語間隔、幅、垂直方向の配置、上、右、下、左、パディング、アウトラインの幅、マージン、最小幅、最小高さ、最大幅などの実数。 max-height、line-height、height、border-width、border-spacing、background-position およびその他の属性

3. パーセント: word-spacing、width、vertical-align、top、right、などの実数。 Bottom、Left、min-width、min-height、max-width、max-height、line-height、height、background-position およびその他の属性

4、実数空間における整数離散ステップ (整数)、そして、floor() を使用します。整数に変換すると、outline-offset、z-index などの属性が発生します。

5 などの数値の実数 (浮動小数点) 値。およびその他の属性;

6. 変換リスト: 詳細については、「CSS3 変換」を参照してください。

7. 長方形: x、y、幅、高さ (数値に変換) などを変換します。 8. 可視性: 0 から 1 の数値範囲内の個別のステップ。0 は「非表示」を意味し、1 は完全に「表示」を意味します。例: 可視性

9. シャドウ: カラー、x、y、ブラー (ブラー) に作用します。 ) 属性 (例: text-shadow

) 10. gradient: それぞれのストップの位置と色が変化します。アニメーションを実行するには、同じタイプ (放射状または線形) と同じストップ値を持つ必要があります。たとえば、背景画像

11、ペイントサーバー (SVG): 次のケースのみをサポートします: グラデーションからグラデーションおよびカラーへ色を付けると、作業は上記と同様になります

12. 上記のスペース区切りのリスト: リストに同じ項目値がある場合、リスト内の各項目は上記のルールに従って変更されます。それ以外の場合は、何も表示されません。変更

13. 略記プロパティ: 略語のすべての部分をアニメーション化できれば、すべての個々のプロパティの変更と同様に変更されます

トランジション効果を実現できる具体的な CSS 属性は何ですか? トランジション効果を実現できるすべての CSS 属性値と値のタイプは、W3C 公式 Web サイトにリストされています。詳細については、ここをクリックしてください。ここで注意する必要があるのは、すべての属性変更がトランジションアクション効果をトリガーするわけではないということです。たとえば、ブラウザーがページの幅を変更しても、トランジションエフェクトはトリガーされません。ただし、上の表に示されている属性タイプを変更すると、トランジションアクション効果がトリガーされます。

コード例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文网.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上記のコードで設定される遷移属性はwidthです。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上記のコードは、カンマで区切られた 2 つの属性のトランジション効果を設定できます。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s; -moz-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

提出するリセットコード

自動運転