CSS3 Transform、Transition、Animation プロパティの概要

変換とアニメーションに関連するCSS3の3つのプロパティ:

Transform

ブラウザのサポート:

Internet Explorer 10、Firefox、Opera は、transform 属性をサポートします。

Internet Explorer 9 は、代替の -ms-transform 属性をサポートします (2D 変換のみ)

Safari および Chr は、代替の -webkit-transform プロパティをサポートします。 (3D および 2D 変換)

Opera は 2D 変換のみをサポートします

関数

説明skew(x-angle,y-angle) X 軸と Y 軸に沿って 2D スキュー変換を定義します6つの値の行列を使用して2D変換を定義します

定義。 2D変形、移動要素の幅と高さを変更して 2D スケーリング変換を定義します

行列(n,n,n, n,n,n)

• translate(x, y) メソッドは、左 (X 軸) と上 (Y 軸) の位置で指定されたパラメーターに従って、現在の要素の位置から移動します。 x と y の値は正または負にすることができ、それぞれ異なる方向のオフセットを表します。

• rotate(angle) メソッドは、回転角度を表します。角度が正の場合、要素は時計回りに回転し、負の場合、要素は反時計回りに回転します。

• scale(x, y) メソッドは、x 軸と y 軸の要素のスケーリング率を表します。パラメーターが 1 より大きい場合、要素は拡大されます。要素が減ります。

• skew(x-angle,y-angle) メソッドは、要素を歪ませるために使用されます。最初のパラメーターは水平方向の歪み角度、2 番目のパラメーターは垂直方向の歪み角度です。 2 番目のパラメーターはオプションのパラメーターです。2 番目のパラメーターが設定されていない場合、Y 軸は 0deg

• matrix(n,n,n,n,n,n) メソッドであり、6 値の変換が行われます。行列の 2D 変換 を指定します。この属性値は、前に説明した行列

の変換メソッドをすべて使用します。つまり、デフォルトでは、要素変換の基点は要素の中心になります。ただし、異なる位置にある要素に対してこれらの操作を実行する必要がある場合は、transform-origin を使用して要素の基本位置を変更できます。この属性は 3 つのパラメータを受け取ることができます: transform-origin: x 軸、y 軸、z 軸、

x 軸、水平方向の値を表し、文字パラメータ値を左、中央に取ることができます

右

では、文字パラメータ値の対応するパーセンテージ値を左 = 0%、右 = 100% とすることもできます。

• y 軸は、垂直方向の値を表します。文字値

  top
、center、
• bottom

  を設定することも、文字パラメータ値に対応するパーセンテージ値を取得することもできます。上=0%、中央=50%、下=100%。 z 軸。

  view
が Z 軸上に配置される場所を示し、3D 変形で使用されます。

• 3D変換変換方法

Internet Explorer 10とFirefoxは3D変換をサポートしています

ChromeとSafariは接頭辞-webkit-を追加する必要がありますOperaはまだ3D変換をサポートしていません（2D変換をサポートしています）。 -次元変換が使用されます。 2D 変換に基づく同じプロパティ。 CSS3 の 3D 変換 には主に次の関数が含まれます:

3D 変位: CSS3 の 3D 変位には主に 2 つの関数関数が含まれます:translateZ() と translation3d()

3D 回転: CSS3 では主に 3D 回転。回転 ;

• 3D マトリックス: CSS3 の 3D 変換にも、2D 変換と同様に 3D マトリックス関数関数 matrix3d() があります。

• 以下の変換属性もあります:

• transform-style: ネストされた要素が 3D 空間でどのように表示されるかを指定します。

• perspective: 3D 要素の遠近効果を指定します。

perspective-origin: 3D 要素の下部の位置を指定します。

• backface-

  visibility
: 画面に向かっていないときに要素が表示されるかどうかを定義します。

• 現在、主要な主流ブラウザにおける Transform 3D 属性の互換性はあまり良好ではありません。興味のある読者は、自分で詳細を学ぶことができます。以下に、一般的に使用されるいくつかの関数メソッドを紹介します。
• rotateX() メソッド、X 軸の周りで要素を特定の角度で回転します。

  rotateY() メソッド、Y 軸の周りで特定の角度で要素を回転します。 () メソッドは、Z 軸を中心に要素を指定された度だけ回転します。

Transition

W3C

css3 の遷移は標準では次のように記述されています: 「css の遷移により、css の属性値が一定の時間間隔内でスムーズに遷移することができます。この効果は次のように達成できます。」マウスクリック クリック、フォーカスの取得、クリックされること、または要素への何らかの変更によってトリガーされ、アニメーション効果を伴う CSS プロパティ値をスムーズに変更します。「

transition プロパティの値には、次の 4 つが含まれます。

」 transition-property: HTML 要素 のどの CSS 属性がトランジション グラデーション処理を実行するかを指定します。この属性には、color、

width

、height などのさまざまな標準 CSS 属性を指定できます。

transition-duration: 属性遷移の期間を指定します

• transition-timing-function: グラデーションの速度を指定します:
  1.ease: (徐々に遅くなります) デフォルト値、イーズ関数はベジェ曲線 (0.25、0.1、0.25、1.0) と同等です。 .linear: (均一速度)、線形関数はベジェ曲線 (0.0、0.0、1.0、1.0) に相当します。
  3.イーズイン: (加速度)、イーズイン関数はベジェ曲線に相当します ( 0.42, 0, 1.0, 1.0);
  4.ease-out: (減速)、ease-out 関数はベジェ曲線 (0, 0, 0.58, 1.0) と同等です。 (加速してから減速)、ease -in-out 関数はベジェ曲線 (0.42、0、0.58、1.0) と同等です
  6. cubic-bezier: (この値により時間曲線をカスタマイズできます)、特定の 3 次ベジェ曲線。 4 つの値 (x1、y1、x2、y2) は、曲線上の点 P1 および P2 に固有です。すべての値は [0, 1] の範囲内にある必要があります。そうでない場合は無効になります。
  
  

transition-lay: 遅延時間、つまり移行プロセスの開始にかかる時間を指定します。

ブラウザの互換性

Internet Explorer 9 以前のバージョンは、transition 属性をサポートしていません。

Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Chrome 25 以前および Safari では、接頭辞 -webkit- が必要です。

アニメーション

アニメーション アニメーションを使用するには、まず

key

フレーム、つまりキーフレームの文法規則に慣れる必要があります。名前は「@keyframes」で始まり、その後に「アニメーションの名前」に 1 を加えたものになります。中括弧「{}」、括弧内にはさまざまな期間に対するスタイル ルールがいくつかあります。さまざまなキーフレームは、from (0% に相当)、to (100% に相当)、またはパーセンテージ (ブラウザーのサポートを最適化するために、パーセンテージを使用することをお勧めします) で表され、

@keyframes が定義されています。これが機能するには、アニメーションを通じてセレクターにバインドする必要があります。そうでない場合、アニメーションは効果がありません。アニメーションの属性は以下にリストされています:

Attributeanimationアニメーション-nameanimation-durationanimation-timing-function animation-delayanimation-iteration-countanimation-directionanimation-play -state デフォルトは「実行中」です (一時停止: アニメーションを通過中)

Description	Value
animation-play-state属性を除くすべてのアニメーション属性の省略属性
は @keyframes アニメーションの名前を指定します
アニメーションが 1 サイクル完了するのにかかる秒またはミリ秒を指定します	デフォルトは 0 です
アニメーションのスピードカーブを指定します	デフォルトは「ease」です
アニメーションの開始時期を指定します	デフォルトは0です
を指定しますアニメーションが再生される回数	デフォルトは 1 (無限: 無制限の回数です
次のサイクルでアニメーションを逆再生するかどうかを指定します	デフォルトは「通常」です(reverse: 逆方向に再生; alter: 奇数回順方向に再生)、偶数回の逆方向再生; alter-reverse: 奇数回の逆方向再生、偶数回の順方向再生)
アニメーションが実行中か一時停止中かを指定します

ブラウザの互換性

Inplorer 10、Firefox、およびOpera は @Keyframes ルールとアニメーション プロパティをサポートしています

注: Internet Explorer 9 およびそれ以前のバージョンでは、@keyframe ルールまたはアニメーション属性をサポートしていません

上記のコンテンツは http://blog.csdn.net/ からのものです。 u014607184/article/details/51801393

以上がCSS3 Transform、Transition、Animation プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。