CSS アニメーション プロパティの探索: トランジションとトランスフォーム

CSS アニメーション プロパティの探索: トランジションとトランスフォーム

Web 開発では、Web ページのインタラクティブ性と視覚効果を高めるために、CSS アニメーションをよく使用します。要素の遷移と変換を実装します。 CSS には、アニメーション効果を実現するためによく使用されるプロパティが 2 つあります。それは、transition とtransform です。この記事では、これら 2 つのプロパティの使用法を詳しく説明し、具体的なコード例を示します。

1. Transition 属性

transition 属性は、要素の状態が変化したときにスムーズに遷移することができます。要素の遷移時間、遷移プロパティ、遷移効果を定義することで、よりスムーズでエレガントなアニメーション効果を作成できます。

1. 遷移時間

要素の遷移時間は、transition-duration 属性を通じて設定できます。次のように、秒 (s) またはミリ秒 (ms) を単位として使用できます。

.transition {
    transition-duration: 1s;
}

2. Transition 属性

要素の遷移プロパティは、次のように設定できます。遷移プロパティ属性。次のように、カンマで区切られた 1 つ以上の属性を指定できます。

.transition {
    transition-property: width, height;
}

3. Transition effect

要素のトランジション効果は、transition-timing を通じて設定できます。 -function 属性。 easy (デフォルト値)、ease-in、ease-out、ease-in-out などの定義済みの値を使用することも、

.transition {
    transition-timing-function: ease-in-out;
}

# のようなカスタム ベジェ曲線を使用することもできます。 ##遷移遅延

要素の遷移遅延時間は、transition-delay 属性を通じて設定できます。

.transition {
    transition-delay: 0.5s;
}

以下は完全な遷移属性の例です:

.transition {
    transition: width 1s ease-in-out 0.5s, height 1s ease-in-out 0.5s;
}

2. 変換属性

# のように、単位として秒 (s) またはミリ秒 (ms) を使用できます。 ##transform プロパティでは、変位、スケーリング、回転、傾きなどの要素を変換できます。さまざまな属性値を設定することで、さまざまなクールなアニメーション効果を作成できます。

翻訳

要素の翻訳効果は、translate() 関数を通じて実現できます。次のように、水平方向と垂直方向の移動距離を指定できます。

.transform {
    transform: translate(100px, 50px);
}

Scale

要素のスケーリング効果は、scale() 関数を通じて実現できます。 。次のように、水平方向と垂直方向のスケーリング率を指定できます。

.transform {
    transform: scale(1.5, 1.5);
}

Rotation

要素の回転効果は、rotate() によって実現できます。関数。回転角度を指定できます。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。例:

.transform {
    transform: rotate(45deg);
}

Tilt

skew() 関数要素の回転を実現するために使用できます。チルト効果。次のように、水平方向と垂直方向の傾斜角度を指定できます:

.transform {
    transform: skew(30deg, 10deg);
}

以下は、transform 属性の完全な例です:

.transform {
    transform: translate(100px, 50px) scale(1.5, 1.5) rotate(45deg) skew(30deg, 10deg);
}

包括的なアプリケーション: トランジションとトランスフォームを組み合わせる

トランジションとトランスフォームのプロパティを組み合わせることで、より豪華でスムーズなアニメーション効果を作成できます。以下は、hover 疑似クラスを使用してボタンの拡大とグラデーション カラーを実装する例です。

.button {
    width: 100px;
    height: 40px;
    background-color: #337ab7;
    color: #ffffff;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.2, 1.2);
    background-color: #5cb85c;
}

上記のコードでは、マウスをボタンの上に置くと、ボタンは 0.3 秒で 1.2 倍に拡大されます。青から青への変化 緑へのグラデーション。

概要

transition 属性とtransform 属性の使用法を学び、深く理解することで、Web ページにさらに動的な効果と視覚的な魅力を追加できます。これら 2 つの属性を適切に使用すると、ユーザーのブラウジング エクスペリエンスが向上します。この記事が、これら 2 つの特性をよりよく理解し、実際のプロジェクトで柔軟に使用するのに役立つことを願っています。

以上がCSS アニメーション プロパティの探索: トランジションとトランスフォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。