CSSトランジション
CSSトランジション
CSSトランジションを使用すると、特定の期間にわたってプロパティ値をスムーズに変更できます。
下の要素にカーソルを合わせると、CSSトランジション効果が表示されます。
CSS
この章では、次のプロパティについて学習します。
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
トランジションのブラウザーサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
|
プロパティ |
|||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
CSSトランジションの使用方法
トランジション効果を作成するには、次の2つを指定する必要があります。
- 効果を追加するCSSプロパティ
- 効果の持続時間
注：デュレーション部分が指定されていない場合、デフォルト値は0であるため、トランジションは効果がありません。
次の例は、100px *100pxの赤い<div>要素を示しています。<div>要素では、幅プロパティのトランジション効果も指定されており、持続時間は2秒です。
例
div{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
指定されたCSSプロパティ(幅)が値を変更すると、トランジション効果が開始されます。
ここで、ユーザーが<div>要素の上にマウスを置いたときにwidthプロパティに新しい値を指定しましょう。
カーソルが要素の外に出ると、徐々に元のスタイルに戻ることに注意してください。
複数のプロパティ値を変更する
次の例では、幅と高さの両方のプロパティにトランジション効果を追加します。幅は2秒、高さは4秒です。
トランジションの速度曲線を指定する
transition-timing-functionプロパティは、遷移効果の速度曲線を指定します。
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秒の遅延があります。
トランジション+トランスフォーメーション
次の例では、トランジション効果を変換に追加します。
その他の遷移の例
CSSトランジションプロパティは、次のように1つずつ指定できます。
例
div{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
または省略形のtransitionプロパティを使用して
CSSトランジションプロパティ
次の表に、すべてのCSSトランジションプロパティを示します。
|
プロパティ |
説明 |
|---|---|
| transition | 4つのトランジションプロパティを1つのプロパティに設定するための簡略プロパティ |
| transition-delay | トランジション効果の遅延(秒単位)を指定します |
| transition-duration | 遷移効果が完了するまでにかかる秒数またはミリ秒数を指定します |
| transition-property | トランジション効果の対象となるCSSプロパティの名前を指定します |
| transition-timing-function | トランジション効果の速度曲線を指定します |