CSS3 で translate と transition を使用する方法

translate と transition は非常に強力で、習得するのは不可能だといつも感じています。実際、理解する気が起きません。インターフェースのドキュメントを 30 分もかからずに読み、大まかな理解が得られました。以下は例です。ダウンロードして自分で実行できます。

<!DOCTYPE html>
<html>
<ヘッド>
  <title>翻訳と移行</title>
</head>
<本文>
<スタイル タイプ="text/css">
  div {
    幅: 100ピクセル;
    高さ: 75px;
    背景色: 赤;
    境界線: 1px 黒一色;
  }

  div#翻訳{
    遷移: すべて 2;
    -ms-transition: すべて 2 秒;
    -webkit-transition: すべて 2;
  }

  div#translate:hover{
    変換: translate(50px, 100px);
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
  }
</スタイル>
<div>こんにちは、これは Div 要素です</div>
<div id='translate'>こんにちは、これは別の Div 要素です</div>
</本文>
</html>

デモについては、ここをクリックしてください[/css3/translate.html]

translate(a, b): 正式には 2D 転送と呼ばれ、実際には平面上の x 軸と y 軸の移動です。これほど多くの用語を使用する理由は、私たちが十分な教育を受けておらず、簡単に理解してほしくないからです。
a - 水平方向（左右）に、つまり x 軸上で単位距離を移動します。たとえば、10 ピクセルの場合は 10 ピクセル移動します。正の値は右に移動し、負の値は左に移動します。 b - 垂直方向（上下）に、つまり y 軸上で b 単位距離を移動します。たとえば、50 ピクセルの場合は 10 ピクセル移動します。正の値は下に移動し、負の値は上に移動します。

開始点は左上隅ですが、要素位置を最初に原点以外の点に設定すると、要素単位で計算が行われるという別の問題があります。

原点 (0,0) ----------
|
|
|

トランジションアニメーショントランジション

遷移: プロパティ期間タイミング関数遅延

プロパティ - CSS プロパティ

継続時間 - アニメーションの実行期間。0 の場合、アニメーションは実行されません。

デフォルトのタイミング関数アニメーション実行モードはeaseです

delay - アニメーション遅延実行時間デフォルトは0

これら4つは属性です。他の属性は書いていないと思います。詳細はドキュメント[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]を参照してください。

要約する

CSS3 の translate と transition の使い方に関するこの記事はこれで終わりです。CSS3 translate transition の使い方の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ウェブページでメモの詳細が灰色になる問題に対処する

>>: vue v-for ループオブジェクトの属性