CSSトランジション
CSSトランジション
CSSトランジションを使用すると、特定の期間にわたってプロパティ値をスムーズに変更できます。
下の要素にマウスを合わせると、CSS遷移効果が表示されます。
この章では、次のプロパティについて学習します。
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
トランジションのブラウザサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| 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 red <div>要素を示しています。<div>要素は、幅プロパティの遷移効果も指定しており、持続時間は2秒です。
例
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
指定したCSSプロパティ（幅）の値が変わると、トランジション効果が始まります。
ここで、ユーザーが<div>要素の上にマウスを置いたときにwidthプロパティに新しい値を指定しましょう。
例
div:hover
{
width: 300px;
}
カーソルが要素の外にマウスを置くと、徐々に元のスタイルに戻ることに注意してください。
いくつかのプロパティ値を変更する
次の例では、widthプロパティとheightプロパティの両方に遷移効果を追加します。持続時間は、幅が2秒、高さが4秒です。
例
div
{
transition: width 2s, height 4s;
}
遷移の速度曲線を指定します
このtransition-timing-functionプロパティは、遷移効果の速度曲線を指定します。
transition-timing-functionプロパティには、次の値を指定できます。
ease-開始が遅く、次に速く、次にゆっくりと終了する遷移効果を指定します（これはデフォルトです）linear-開始から終了まで同じ速度の遷移効果を指定しますease-in-スロースタートのトランジション効果を指定しますease-out-スローエンドのトランジション効果を指定しますease-in-out-開始と終了が遅い遷移効果を指定しますcubic-bezier(n,n,n,n)-キュービックベジェ関数で独自の値を定義できます
次の例は、使用できるさまざまな速度曲線の一部を示しています。
例
#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 {
transition-delay: 1s;
}
移行+変換
次の例では、変換に遷移効果を追加します。
例
div {
transition:
width 2s, height 2s, transform 2s;
}
その他の移行例
CSS遷移プロパティは、次のように1つずつ指定できます。
例
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
または省略形のプロパティを使用してtransition：
例
div
{
transition: width 2s linear 1s;
}
CSS遷移プロパティ
次の表に、すべてのCSS遷移プロパティを示します。
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |