CSS3 のトランスフォーム、トランジション、アニメーション プロパティの違いの詳細な例

最近、プロジェクトで CSS3 のアニメーション プロパティを使用しました。しばしば混乱しやすい。そこで、困っている友達が参考にして学べるように、インターネットの情報を調べてまとめてみました。

Transform
一部のテストケースでは、transform 属性がデモンストレーションされるたびに、アニメーション化されているように見えます。このため、直観的な思考を持つ少数の人は、transform アトリビュートがアニメーション アトリビュートであると考えます。それに対して、transform 属性は静的属性であり、スタイルに書き込むと、変更処理を行わずにその効果が直接表示されます。トランスフォームの主な目的は、要素の特別な変形を行うことです。簡単に言うと、これは CSS グラフィック変形ツールです。

グラフィック変形の基本条件のうち原点設定については、CSSでtransform-originを使用して定義します。この定義の原点は、CSS の影響を受ける要素の左上隅を 0,0 として計算する必要があります。他の属性はこの属性に基づいて計算されます。

グラフィックの変化パターンについては、CSS3標準のtransform-styleで定義されています。デフォルトはフラットで、単純な効果が表示されます。そして、preserve-3d は空間を 3D モードでレンダリングします。普通に考えれば、preserve-3dだけあればいいのですが、「preserve-3dをオンにするとGPUアクセラレーションが使われる」という噂から判断すると、この属性はシステム消費量を減らすために使われるのかもしれません。結局のところ、2dよりも3dの方が優れています。 . これには、もう 1 つの次元の計算が必要です。

3D モードを使用する必要がある場合は、まずスタイルを 3D として指定し、親要素に Perspective と Perspective-origin を追加して視点の点を指定する必要があります。

要素のスタイルを変更するためにデザイナーが使用する特定の属性は次のとおりです:

1. translation3d(x,y,z) は、ページの 3 つの軸上の要素の位置を制御するために使用されます
2 、rotate(deg; ) 要素の回転角度を制御するために使用されます。
3. skew[x,y](deg) この属性は、傾きを作成するために使用されます。これは、作成時に必要な属性として使用されることをご存知でしょう。 2D の 3D パースペクティブ
4.scale3d(x,y,z) はズームインとズームアウトに使用され、属性は比率です
5.matrix3d、css マトリックス。この行列属性により、上記の属性値はすべて網羅されていますが、個人的には可読性が非常に悪いと感じており（数値と単位ばかりで、覚えるのが少し曖昧です）、現時点では推奨する理由がありません。その使用法。

一般に、CSSのtransformのプロパティと、動的および静的な観点からは、元々使用されていたleft、right、top、bottomのプロパティに違いはありません。したがって、transformを使用する場合は、このタイプの静的プロパティに分類する必要があります。変形を配置するためのプロパティ。

Transition
Transition プロパティは、非常にシンプルで使いやすい単純なアニメーション プロパティです。一般的に Web ページの単純な特殊効果に使用されるアニメーションの簡易版と言えます。たとえば、次の 2 つのスタイルがあります:

コードは次のとおりです:

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

animate の遷移属性は、左の属性が変更されると、アニメーション効果を実行します (左の属性の変更のみに基づいて、他の属性は実行されません)。アニメーションの変更に追加されます);

まず第一に、要素の CSS は位置です。 animate を cssList に追加するか、position を animate に置き換えると、要素の属性が変更され、指定された属性が変更される前の値が開始値となり、変更後の属性が終了値になります。アニメーション効果が実行されます。これは単純な 2 点変更プロセスであり、アニメーション属性の複雑さを大幅に簡素化します。

同時に、トランジションアニメーション中に属性値に新たな変更があった場合、現在のアニメーションの実行は中断され、中断時の属性値が開始値として新しいアニメーションに提供されます。新しいアニメーション効果を計算します。

CSSを書く際、変化する属性はtransformだけなので、transition属性にresponse属性をallと指定し、要素の全属性(アニメーション可能な属性)の変化アニメーションに応答して実行することができます。

Animation
公式の紹介文で紹介されているこの属性は、transition 属性の拡張です。しかし、この単純な導入には、キーフレームという単純ではないものが含まれています。

Flash アニメーションを作成したことがある人なら、Flash にはタイムラインとキーフレームという 2 つの基本的な武器があることをご存知でしょう。 CSS キーフレームの出現により、Flash の世界にこれら 2 つの属性のコレクションが提供されます。キーフレームの簡単な例を見てください:

コードは次のとおりです:

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
 left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

以上がCSS3 のトランスフォーム、トランジション、アニメーション プロパティの違いの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。