CSS3トランジション
CSS3トランジションを使用すると、指定した期間にわたって、（1値から別のものに）スムーズにプロパティ値を変更することができます。
例：以下の要素の上にマウスCSS3のトランジション効果を参照するには：
トランジションのためのブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
CSS3トランジションを使用する方法？
トランジションエフェクトを作成するには、次の2つを指定する必要があります。
- あなたが効果を追加したいCSSプロパティ
- 効果持続期間
注：継続時間部分が指定されていない場合、デフォルト値は0であるため、遷移は、効果がありません。
次の例は、 100px * 100px赤<div>要素を。 <div>要素は、2秒の持続時間で、widthプロパティのトランジションエフェクトを指定しました：
例
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
指定されたCSSプロパティ（幅）の値を変更したときにトランジション効果を開始します。
今、私たちはwidthプロパティの新しい値を指定することができたとき以上のユーザーマウスを置い<div>要素：
ときにカーソルマウスを置いた要素のうち、それは徐々に元のスタイルに変更されていることに注意してください。
いくつかのプロパティ値を変更します
次の例では、高さ、幅のため2秒、4秒の持続時間で、幅と高さのプロパティの両方にトランジションエフェクトを追加します。
例
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
»それを自分で試してみてください 転移の速度曲線を指定します
transition-timing-functionプロパティは、トランジションエフェクトの速度曲線を指定します。
遷移タイミング機能のプロパティは次の値を持つことができます。
-
ease- 、高速その後、スロースタートでトランジションエフェクトを指定し、次に（これがデフォルトです）をゆっくり終了 -
linear-最初から最後まで同じ速度でトランジションエフェクトを指定します -
ease-in-スロースタートとトランジションエフェクトを指定します -
ease-out-スローエンドにトランジションエフェクトを指定します -
ease-in-out-スロースタートとエンドとトランジションエフェクトを指定します -
cubic-bezier(n,n,n,n)-あなたが独自の値を定義できますcubic-bezier機能
次の例では、使用することができます異なる速度曲線のいくつかを示しています。
例
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} »それを自分で試してみてください トランジションエフェクトを遅らせます
transition-delayプロパティは、トランジション効果のための遅延時間（秒単位）を指定します。
次の例では、開始する前に1秒の遅延があります。
トランジション+トランスフォーメーション
次の例はまた、トランジション効果への変換を追加します。
例
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} »それを自分で試してみてください 以上の遷移例
CSS3のトランジションのプロパティは次のように、1つずつ指定することができます。
例
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
»それを自分で試してみてください または短縮形のプロパティ使用してtransition ：
練習で自分自身をテスト！
CSS3のトランジションのプロパティ
次の表は、すべての遷移のプロパティを示しています。
| プロパティ | 説明 |
|---|---|
| transition | 単一のプロパティに4遷移プロパティを設定するための簡略記述特性 |
| transition-delay | トランジション効果用の遅延時間（秒単位）を指定します。 |
| transition-duration | トランジションエフェクトが完了するまでの秒数またはミリ秒単位で指定します |
| transition-property | トランジションエフェクトの対象となるCSSプロパティの名前を指定します。 |
| transition-timing-function | トランジションエフェクトの速度曲線を指定します。 |