CSS入門 | CSS3変形 | Transition

Tags:

Transition

CSS3では、transitionプロパティを使用して、指定された時間の間に要素のプロパティ値をなめらかに変化させることができる。

CSS3トランジション(transition)の対応バージョン

CSS3トランジション(transition)に対応している主要Webブラウザーのバージョンは次のとおりである。また、ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

プロパティ ie chrome firefox safari opera
transition / transition-delay / transition-duration / transition-property / transition-timing-function 10.0 26.0 / 4.0 -webkit- 16.0 / 4.0 -moz- 6.1 / 3.1 -webkit- 12.1 / 10.5 -webkit

トランジション(transition)

トランジション(transition)のために提供されるプロパティ(property)は次のとおりである。

  1. transition
  2. transition-delay
  3. transition-duration
  4. transition-property
  5. transition-timing-function

transitionプロパティ

transitionプロパティは次の順序で定義できる。

  1. その要素に追加するCSSスタイルのトランジション(transition)効果を設定する。
  2. 追加するトランジション効果が続く時間を設定する。

次の例は、その要素にマウスを乗せると、要素の幅が1秒間で3倍に広がる例である。

<style>
    div.keyboard {
        width: 100px;
        -webkit-transition: width 1s;
        transition: width 1s;
    }
    div.keyboard:hover { width: 300px; }
</style>

また、その要素の複数のプロパティを同時に変更することもできる。

次の例は、その要素にマウスを乗せると、要素の幅だけでなく高さも変更する例である。

<style>
    #resize {
        height: 100px;
        width: 150px;
        -webkit-transition: width 1s, height 3s;
        transition: width 1s, height 3s;
    }
    #resize:hover { width: 300px; height: 500px; }
</style>

継続時間の既定値は0秒なので、効果が続く時間を指定しなければ何の効果も現れない。

transition-timing-functionプロパティ

transition-timing-functionプロパティは、トランジション(transition)効果の時間あたりの速度を設定する。

transition-timing-functionプロパティの値には、次のような値を設定できる。

  1. linear : トランジション(transition)効果が最初から最後まで一定の速度で進行する。
  2. ease : 既定値で、トランジション(transition)効果がゆっくり始まり、その後速くなり、最後にまた遅くなる。
  3. ease-in : トランジション(transition)効果がゆっくり始まる。
  4. ease-out : トランジション(transition)効果がゆっくり終わる。
  5. ease-in-out : トランジション(transition)効果がゆっくり始まり、ゆっくり終わる。
  6. cubic-bezier(n,n,n,n) : トランジション(transition)効果がユーザー定義のcubic-bezier関数に従って進行する。
<style>
    div {
        width: 100px;
        -webkit-transition: width 1s;
        transition: width 1s;
    }
    #div_01 {
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }
    #div_05 {
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    div:hover { width: 300px; }
</style>

transition-delayプロパティ

transition-delayプロパティは、トランジション(transition)効果が現れるまでの遅延時間を設定する。トランジション(transition)効果は、このプロパティで設定された時間が経過して初めて開始される。

<style>
    #resize {
        height: 100px;
        width: 150px;
        -webkit-transition: width 1s, height 2s;
        transition: width 1s, height 2s;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    #resize:hover { width: 300px; height: 300px; }
</style>

トランジション(transition)効果と変形(transform)効果の同時適用

トランジション(transition)効果と変形(transform)効果を一緒に適用することもできる。

<style>
    #windmill {
        height: 100px;
        width: 100px;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        transition: width 2s, height 2s, transform 2s;
    }
    #windmill:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>

CSS3 transitionプロパティ

プロパティ 説明
transition すべてのtransitionプロパティを使ったスタイルを1行で設定できる。
transition-property 要素に追加するトランジション(transition)効果を設定する。
transition-duration トランジション(transition)効果が続く時間を設定する。
transition-timing-function トランジション(transition)効果の時間あたりの速度を設定する。
transition-delay トランジション(transition)効果が現れるまでの遅延時間を設定する。