CSS3トランジション

CSS3トランジション

CSS3は、我々はFlashアニメーションやJavaScriptを使用せずに、別の時間に一つのスタイルから変換することができるという効果を追加する必要があります。 次の要素の上にマウス：

次の要素の上にマウス：

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

それがどのように動作しますか？

CSS3トランジションは徐々に別の効果のために一つのスタイルから変更する要素です。

これを達成するために、二つのことを定義する必要があります。

• 私は、CSSプロパティの効果を追加したいです
• 効果の持続時間を指定します。

例

width属性は、2秒の持続時間をトランジション効果を適用します：

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

注意：あなたは制限時間を指定しない場合、デフォルト値は0であるため、移行は、効果がありません。

効果は、指定されたCSSプロパティの値が変更さを変更します。 典型的なCSSプロパティの変更が要素の上にユーザーマウスであります：

例

引当金マウスポインタ懸濁液（：ホバー）の<div>要素にするとき：

DIV：ホバー
{
幅：300ピクセル;
}

»をお試しください

注：要素にマウスカーソルが、それは徐々に元のスタイルを変更した場合

変更数

変更スタイルの複数のエフェクトを追加するには、カンマで区切られた属性を追加します。

例

追加された幅、高さ、およびトランジション効果：

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

»をお試しください

トランジションのプロパティ

次の表は、すべての遷移のプロパティを示しています。

次の2つの例は、すべてのトランジション属性を設定します。

例

一例ではすべての遷移のプロパティを使用します。

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;
}

»をお試しください

例

そして、上記と同じトランジション効果の例が、速記遷移プロパティを使用しています。

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

»をお試しください