CSS3 移行_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 移行_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:04:49

オリジナル

1083 人が閲覧しました

概要

CSSトランジション（トランジション）は、CSSプロパティの変更速度を制御するために使用されます。プロパティの変更プロセスをすぐに有効にするのではなく、一定期間継続させることができます。たとえば、要素の色を白から黒に変更すると、通常、この変更はトランジションを使用した後すぐに有効になり、カーブレートで変化します。このプロセスはカスタマイズできます。

CSS3 トランジションと CSS3 アニメーションには同様の効果がありますが、比較的単純です。

トランジションは特定の CSS プロパティに基づいて動作し、アニメーションは特定のアニメーションルールに基づいて動作します。

試してみましょう

トランジションの魅力を体験するために、完全な小さな例を見てみましょう。

<!DOCTYPE html><html><head><style>     div {        width: 100px;        height: 100px;        background: blue;        transition: width 2s;        -moz-transition: width 2s; /* Firefox */        -webkit-transition: width 2s; /* Safari and Chrome */        -o-transition: width 2s; /* Opera */    }    div:hover {        width:300px;    }</style></head><body><div></div></body></html>

ログイン後にコピー

トランジションを実現するには、次の 2 点を指定する必要があります:

エフェクトを追加する CSS プロパティを指定します
エフェクトの継続時間を指定します

トランジション属性

トランジションは遷移省略属性を介して渡されるか、または対応する特定のプロパティによって、どのプロパティがアニメーション化されるか (これらのプロパティを明示的にリストします。transition-property)、いつ開始するか (transition-delay を設定)、どれくらい継続するか (transition-duration を設定)、およびアニメーション化する方法 (一定の速度で、または最初は速く、次にゆっくりなどの遷移タイミング関数関数を定義します。これについては以下で紹介します。

transition-property

transition-property プロパティは、トランジション効果を適用する CSS プロパティの名前を指定します。 (トランジション効果は、指定された CSS プロパティが変更されると開始されます)。

ヒント: トランジション効果は通常、ユーザーがマウスポインタを要素上に移動させると発生します。

transition-property: none; /* 没有过渡效果 */transition-property: width; /* 宽度变化将获得过渡效果 */transition-property: all; /* 所有属性变化将获得过渡效果 */transition-property: width, height; /* 宽度和高度变化将获得过渡效果 */

ログイン後にコピー

transition-duration

transition-duration プロパティは、トランジション効果が完了するまでにかかる時間 (秒またはミリ秒) を指定します。

transition-duration: 2s;/* 等价于2000ms */

ログイン後にコピー

transition-timing-function

transition-timing-function 属性は、トランジション効果の速度カーブを指定します。

この部分はCSS3アニメーションのanimation-timing-functionと同じなので、詳細は割愛します。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

ログイン後にコピー

transition-delay

transition-lay プロパティは、トランジション効果がいつ開始されるかを指定します (秒またはミリ秒単位で、負の値も許可されます)。

transition-delay: 2s;

ログイン後にコピー

transition

上記の特定の属性の省略形属性。

transition: property duration timing-function delay;

ログイン後にコピー

例:

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

ログイン後にコピー

概要

トランジションにより、属性変更プロセスがすぐに有効になるのではなく、一定期間継続することができ、ユーザーエクスペリエンスを大幅に向上させることができます。

トランジションは、属性の持続時間を制御するために使用されます。効果を生成するには、attribute と duration という少なくとも 2 つの条件が必要です。

トランジションはアニメーションに比べて比較的単純で、通常は 2D/3D 変換と組み合わせてさまざまなアニメーション効果を生成します。