CSS3のトランジションプロパティ
例
div要素の上にマウスを移動し、徐々に100pxにから300ピクセルにテーブルの幅を変更::
div要素
{
幅：100ピクセル;
トランジション：幅2秒。
-webkit-移行：幅2S; / *サファリ* /
}
DIV：ホバー{幅：300ピクセル;}
{
幅：100ピクセル;
トランジション：幅2秒。
-webkit-移行：幅2S; / *サファリ* /
}
DIV：ホバー{幅：300ピクセル;}
»をお試しください
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
属性の定義と指示
遷移プロパティ、遷移期間、遷移タイミング機能、および遷移遅延：遷移特性は簡略記述特性は、4つの属性を持っています。
注：必ず、0のそれ以外の期間を遷移期間のプロパティを指定して、トランジションの効果はありません。
| デフォルト： | すべて0やす0 |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | オブジェクト.style.transition = "幅2S」 |
文法
トランジション：プロパティ期間のタイミング機能の遅延;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
