CSS アニメーションプロパティ: トランスフォームとトランジション-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

PHPz

Oct 27, 2023 pm 04:06 PM

cssアニメーションtransform

CSS 动画属性：transform 和 transition

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

現代の Web デザインでは、アニメーション効果はページに活力と魅力を加えることができる不可欠な要素となっています。 CSS は、さまざまなアニメーション効果を実現するためにいくつかのプロパティと関数を提供します。最も一般的に使用される 2 つのプロパティは、transform とtransition です。この記事では、これら 2 つのプロパティを詳細に紹介し、読者がこれら 2 つのプロパティをよりよく理解して使用できるように、具体的なコード例を示します。

transform 属性

transform 属性は、要素を変換または回転するために使用されます。変換属性を使用すると、移動、拡大縮小、回転、傾斜などの効果を実現できます。一般的に使用される値は次のとおりです。

翻訳:translate(x, y)
サンプルコード:

transform: translate(100px, 50px);

Scale:scale(x, y)
サンプルコード:

transform: scale(1.5, 1.5);

回転: 回転(角度)
サンプルコード:

transform: rotate(45deg);

傾斜: スキュー(x 角度、y 角度)
サンプルコード:

transform: skew(10deg, 0);

transition 属性

transition 属性は、要素にトランジション効果を追加して、スタイルが変更されたときにスムーズに遷移するために使用します。遷移属性を通じて、要素の遷移時間、遷移タイプ、遷移遅延などを設定できます。一般的に使用される値は次のとおりです。

遷移時間:transition-duration
サンプルコード:

transition-duration: 1s;

遷移タイプ:transition-timing-function
サンプルコード:

transition-timing-function: ease-in-out;

遷移遅延:transition-delay
サンプルコード:

transition-delay: 0.5s;

上記は、transform 属性とtransition 属性の基本的な使用法です。これらは要素に単独で適用することも、組み合わせてより複雑な要素を作成することもできます。 . アニメーション効果。これら 2 つのプロパティを使用して簡単なアニメーション効果を作成する方法を示す完全なコード例を次に示します。

HTML コード:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}

.box:hover {
  transform: rotate(180deg);
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

上記のコードでは、マウスが赤色の上に移動したときに、正方形をオンにすると、時計回りに 180 度回転し、トランジション時間は 1 秒で、トランジション効果はイーズインアウト (最初はゆっくり、次に速く、次にゆっくり) です。

要約すると、transform プロパティとtransition プロパティはアニメーション効果を実現するための重要なツールです。これらの属性を柔軟に使用することで、鮮やかで興味深いアニメーション効果をページに追加し、ユーザーエクスペリエンスとページの品質を向上させることができます。この記事で提供されるコード例と説明が、読者がこれら 2 つのプロパティの使用方法をよりよく理解するのに役立つことを願っています。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。