ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS アニメーション プロパティの探索: トランジションとトランスフォーム

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

王林
リリース: 2023-10-20 15:54:26
オリジナル
638 人が閲覧しました

CSS 动画属性探索:transition 和 transform

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

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

1. Transition 属性

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

  1. 遷移時間

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

.transition {
    transition-duration: 1s;
}
ログイン後にコピー
  1. Transition 属性

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

.transition {
    transition-property: width, height;
}
ログイン後にコピー
  1. 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 プロパティでは、変位、スケーリング、回転、傾きなどの要素を変換できます。さまざまな属性値を設定することで、さまざまなクールなアニメーション効果を作成できます。

翻訳
  1. 要素の翻訳効果は、translate() 関数を通じて実現できます。次のように、水平方向と垂直方向の移動距離を指定できます。
.transform {
    transform: translate(100px, 50px);
}
ログイン後にコピー

Scale
  1. 要素のスケーリング効果は、scale() 関数を通じて実現できます。 。次のように、水平方向と垂直方向のスケーリング率を指定できます。
.transform {
    transform: scale(1.5, 1.5);
}
ログイン後にコピー

Rotation
  1. 要素の回転効果は、rotate() によって実現できます。関数。回転角度を指定できます。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。例:
.transform {
    transform: rotate(45deg);
}
ログイン後にコピー

Tilt
  1. 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート