通常、CSS プロパティの値が変更されると、ブラウザーは対応するスタイルを即座に更新します。たとえば、マウスを要素の上に置くと、:hover セレクターで定義されたスタイルが要素に即座に適用されます。 CSS3 には遷移機能が追加されました。この機能を使用すると、Flash や JavaScript を使用せずに、単純なアニメーションと同様に、指定した時間内で要素をあるスタイルから別のスタイルにスムーズに遷移させることができます。
CSS では、トランジションに関連する次の 5 つのプロパティが提供されます。
トランジション効果を正常に実装するには、次の 2 つのことを定義する必要があります。
(1) 要素内のパラメータと遷移効果のプロパティ。
(2) トランジション効果の持続時間。
ヒント: トランジション効果は通常、マウスが要素上にあるときに発生します。トランジション期間が設定されていない場合、トランジション時間のデフォルト値は 0 であるため、トランジション効果は有効になりません。
1. 遷移プロパティ
transition-property 属性は、遷移に関与する要素の属性の名前を設定するために使用されます。構文形式は次のとおりです。
遷移プロパティ:なし|すべて|プロパティ;
パラメータの説明は次のとおりです。
none: トランジション効果に属性が関与しないことを示します。
all: すべての属性がトランジション効果に参加することを示します。
property: トランジション効果を適用する CSS プロパティ名のリストを定義します。複数のプロパティ名を区切るにはカンマを使用します。
サンプルコードは次のとおりです。
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p roberty:width,background;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>実行結果:
2. 移行期間
transition-duration 属性は、移行にかかる時間を設定するために使用されます (秒またはミリ秒)。構文は次のとおりです。
移行期間:時間;
このうち、時間はトランジション効果が完了するまでにかかる時間 (秒またはミリ秒) です。デフォルト値は 0 で、効果はありません。
トランジションに参加する複数の属性がある場合は、transition-duration: 1s, 2s, 3s; のように、カンマを使用して複数の属性を区切ることもできます。さらに、時間を使用して、遷移に参加するすべてのプロパティの遷移に必要な時間を設定することもできます。サンプルコードは次のとおりです。
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,背景;transition-duration:.25s,1s;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body>< /html>3. 遷移タイミング関数
transition-timing-function 属性は、トランジション アニメーションのタイプを設定するために使用されます。属性のオプションの値は次のとおりです。
4. 遷移遅延
トランジション遅延属性は、トランジション効果の開始時期を設定するために使用されます。属性の構文形式は次のとおりです。
遷移遅延:時間;
このうち、パラメータ time は、トランジション効果が開始されるまでの待ち時間を秒またはミリ秒で設定するために使用されます。
5. 移行
遷移属性は、上記の 4 つの属性の略称であり、この属性により、上記の 4 つの属性を同時に設定できます。属性の構文形式は次のとおりです。
遷移:遷移プロパティ遷移期間遷移タイミング関数遷移遅延;
transition属性において、transition-propertyとtransition-durationは必須パラメータであり、transition-timing-functionとtransition-Delayはオプションのパラメータである。必要がなければ省略することができる。さらに、トランジション属性を使用してトランジション効果の複数のグループを設定することもできます。サンプル コードは次のとおりです。