CSS3におけるアニメーション属性transform、transition、アニメーション属性の違いの分析

この記事では、CSS3のアニメーション属性のtransformとtransitionとの違いの分析を主に紹介します。これを必要な友人に共有します。

最近使用しました。プロジェクトのアニメーションプロパティの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だけだったので、要素の全属性(アニメーション可能な属性)の変化アニメーションに応答して実行できるresponse属性をtransition属性に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%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3中@keyframes动画的实现

关于css属性的选择对动画性能的影响

CSS实现radio和checkbox的 实现效果

以上がCSS3におけるアニメーション属性transform、transition、アニメーション属性の違いの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。