ホームページ > 記事 > ウェブフロントエンド > CSSのトランジションとトランスフォームの違い
CSSのトランジションとトランスフォームの違い
- 王林オリジナル
- 2024-02-18 19:46:191419ブラウズ
CSSのtransitionとtransformはどちらもアニメーション効果を実現するために使用されるプロパティですが、機能や使用方法が異なります。
transition 属性は、CSS 属性の変更時の要素のトランジション効果を指定するために使用されます。トランジション属性を使用すると、要素の属性を突然変化させるのではなく、初期状態から最終状態までスムーズに変化させることができます。遷移の構文は次のとおりです。
transition: property duration timing-function delay;
このうち、property は遷移する CSS プロパティを表し、単一のプロパティまたはカンマで区切られた複数のプロパティを指定できます。 duration は、遷移の継続時間を秒またはミリ秒で表します。 timing-function は、トランジションの速度曲線を制御するために使用されるトランジション エフェクトのタイミング関数を表します。デフォルトは easy です。遅延は、遷移が開始されるまでの遅延時間を表します。
以下は、transition トランジションの使用例です:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>上の例では、マウスが .box 要素の上にあると、幅が 100px から 200px に滑らかに遷移します。
transform アトリビュートは、回転、スケーリング、移動、傾斜などの要素の変形操作を実行するために使用されます。変換属性を使用すると、ドキュメントのレイアウトを変更せずに要素の外観を変更できます。変換の構文は次のとおりです。
transform: function(value);
このうち、 function は、回転、スケーリング、平行移動、傾斜など、実行する変形関数を表します。
以下は、transform の使用例です:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>上の例では、.box 要素が 45 度回転されます。
要約すると、transition 属性は CSS 属性のスムーズなトランジション効果を制御するために使用され、transform 属性は要素を変形するために使用されます。実際のアプリケーションでは、この 2 つを一緒に使用して、transition アトリビュートを通じてtransform アトリビュートのトランジション効果を制御することで、より複雑なアニメーション効果を実現することがよくあります。
以上がCSSのトランジションとトランスフォームの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。