CSS3 トランジション
CSS3 トランジション
CSS3では、あるスタイルから別のスタイルへ変化させることでエフェクトを追加できますが、FlashアニメーションやJavaScriptを使う必要はありません。マウスを以下の要素に移動してください：
マウスを以下の要素に移動してください：
CSS3
トランジション
トランジション
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-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- |
| 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プロパティを指定します。
- 効果の継続時間を指定します。
例
幅プロパティに適用されるトランジション効果、持続時間2秒：
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
注意：期間を指定しない場合、デフォルト値が0のため、transitionは効果がありません。
指定したCSSプロパティの値が変更されると、効果が変化します。典型的なCSSプロパティの変化は、ユーザーのマウスが要素の上に置かれたときです：
注意：マウスカーソルがその要素に移動すると、元のスタイルが徐々に変化します。
複数の変更
複数のスタイルの変形効果を追加するには、プロパティをカンマで区切って追加します：
例
幅、高さ、変換効果を追加：
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
試してみる »
トランジションプロパティ
以下の表は、すべてのトランジションプロパティを示しています：
| プロパティ | 説明 | CSS |
|---|---|---|
| transition | 省略形プロパティ。1つのプロパティで4つのトランジションプロパティを設定します。 | 3 |
| transition-property | トランジションを適用するCSSプロパティの名前を指定します。 | 3 |
| transition-duration | トランジション効果にかかる時間を定義します。デフォルトは0です。 | 3 |
| transition-timing-function | トランジション効果のタイミング曲線を指定します。デフォルトは "ease" です。 | 3 |
| transition-delay | トランジション効果がいつ開始するかを指定します。デフォルトは0です。 | 3 |
以下の2つの例は、すべてのトランジションプロパティを設定します：
例
1つの例ですべてのトランジションプロパティを使用：
div
{
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;
}
試してみる »
例
上記の例と同じトランジション効果ですが、省略形の transition プロパティを使用しています：
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
試してみる »