CSS3 その他

CSS3遷移効果

遷移機能は、指定された期間内にCSS属性の値の変更が滑らかに発生するようにします。3CSSを理解する

遷移

CSS3通常、CSS属性の値が変更されると、表示された結果が即座に更新されます。一般的な例として、マウスオーバー時のボタンの背景色の変更があります。通常、カーソルをボタンに置くと、ボタンの背景色がすぐに旧属性値から新属性値に変更されます。

以下の例では、属性を旧値から新値へのアニメーションを時間とともに滑らかに変換する新しい遷移機能を紹介します。background-colorHTMLボタンのマウスオーバー時のアニメーションに対して。

button　{
　　　　背景画像:　#fd7c2a;
　　　　/*　Safari用　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2秒;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2秒;
}
button:hover　{
　　　　背景画像:　#3cc16e;
}

少なくとも2つの属性transitionを指定する必要があります-propertyとtransition-duration（0以上）を指定して、遷移効果を発生させるための他のすべてのトランジション属性デフォルト値が遷移の発生を妨げないため、オプションです。

複数回の変換を実行する

各種遷移属性は、複数の値を指定し、カンマで区切ることができます。これにより、異なる設定を持つ複数の遷移を一度に定義する簡単な方法が提供されます。

button　{
　　　　背景画像:　#fd7c2a;
　　　　border:　3px　solid　#dc5801;
　　　　/*　Safari用　3.0+　*/
　　　　-webkit-transition-property:　background,　border;
　　　　-webkit-transition-duration:　1s,　2秒;
　　　　
　　　　transition-property:　background,　border;
　　　　transition-duration:　1s,　2秒;
}
button:hover　{
　　　　背景画像:　#3cc16e;
　　　　border-color:　#288049;
}

トランジション簡略化属性

トランジションを適用する際には、多くの属性を考慮する必要がありますが、すべてのトランジション属性を1つの属性で指定することでコードを短縮することもできます。

トランジション属性は、一覧に示された順序ですべての個別なトランジション属性（つまり簡略化属性transition-propertyとtransition-durationとtransition-timing-functionとtransition-delayはリストされた順序で指定されます（）。

この属性を使用する場合、値の順序に従ってください。

button　{
　　　　背景画像:　#fd7c2a;
　　　　-webkit-トランジション:　背景画像　2s　ease-in　0秒;　/*　Safari用　3.0+　*/
　　　　トランジション:　背景画像　2s　ease-in　0秒;　
}
button:hover　{
　　　　背景画像:　#3cc16e;
}

CSS3トランジション属性

以下の表は、すべてのトランジション属性を簡単に概説しています：