web-dev-qa-db-ja.com

CSSはVSトランジションを変換します

CSS変換と遷移の主な違いは何ですか？

それらの両方は、オブジェクトの現在の形状/状態を変更するために使用されます。 （JSなどでかなりのアニメーションを作成できます。）

しかし、どこで何を使用するかはまだはっきりしていません。

csscss-transitionscss-transforms
33
rinchik

それらは完全に異なるものです。

遷移 ：

CSSトランジションを使用すると、CSS値のプロパティの変更を指定した期間にわたってスムーズに行うことができます。

変換 ：

CSS変換により、CSSでスタイル設定された要素を2次元または3次元の空間に変換できます。

27
Explosion Pills

transitionとtransformは別々のCSSプロパティですが、transformにtransitionを指定して変換を「アニメーション化」できます。

transition

CSS transitionプロパティは、指定されたプロパティ（背景色、幅、高さなど）の経時的な変化を監視します。

transitionプロパティの構文：

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

たとえば、以下のスタイルは、ホバー時に1秒間にわたってdivの背景の色をオレンジに変更します。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}
<div></div>

transform

CSS transformプロパティは、X、Y、またはZ軸上で要素を回転/スケーリング/傾斜します。その動作はtransitionとは関係ありません。簡単に言えば、ページの読み込み時に、要素は回転/傾斜/拡大縮小されて表示されます。

ここで、回転/傾斜/スケーリングを実行したい場合、たとえば、ユーザーが要素にカーソルを合わせたときに、「変換」を「遷移」する必要があります。

方法は次のとおりです。transitionプロパティの機能は他のcssプロパティの変更をリッスンするため、実際にtransformをtransitionの引数として指定し、変換に基づいて「アニメーション化」できます。必要なトリガー（ホバーアクションなど）.

transformプロパティの構文

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

たとえば、以下のスタイルでは、ホバー時に1秒の期間にわたってdivが回転します。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}
<div></div>
52
Conqueror