CSS3 トランジション

CSS3 トランジション

CSS3により、Flash アニメーションや JavaScript を使用せずに、或るスタイルから別のものに変化する時に、 効果を追加することができます。

下の要素へマウスをのせてください:

ブラウザ・サポート

Internet Explorerは、まだ transition プロパティに対応していません。

Firefox 4 は、接頭辞 -moz- を必要とします。

Chrome と Safari は、接頭辞 -webkit- を必要とします。

Opera は、接頭辞 -o- を必要とします。

どのように機能するか ?

CSS3 トランジションは、要素を或るスタイルから徐々に別のものに変化させる効果です。

これを行うために、2つのことを指定しなければなりません:

• 効果を追加したい CSS プロパティの指定
• 効果の継続時間の指定

例

width プロパティへのトランジション効果、継続時間：2秒:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

注: 継続時間を指定しない場合、トランジションのデフォルト値が 0 であるため、効果はありません。

指定した CSS プロパティの値が変化した時に、効果が始まります。典型的な CSS プロパティ変化は、 ユーザが要素上にマウスをのせた時です:

例

Specify :hover for <div> elements:

div:hover
{
width:300px;
}

Try it yourself »

注:要素からマウス・カーソルを外すと、徐々に元のスタイルに戻ります。

複数の変化

複数のスタイルへトランジション効果を追加するためには、カンマ区切りでプロパティを追加します:

例

幅、高さおよび変形に効果を加えます:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Try it yourself »

Transition プロパティ

次の表は、全 transition プロパティの一覧です:

下の2つの例は、全 transition プロパティを設定しています:

例

1つの例で、全 transition プロパティを使用します:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Try it yourself »

例

ショートハンド transition プロパティを使用して、上記と同じトランジション効果をもたらします:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

Try it yourself »