ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS アニメーション プロパティ: トランスフォームとトランジション
CSS アニメーション プロパティ: トランスフォームとトランジション
- PHPzオリジナル
- 2023-10-27 16:06:261056ブラウズ
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 サイトの他の関連記事を参照してください。