CSSアニメーションにおけるtransform,transitionおよびanimationの違いのまとめ

cssの学習の中で、特にアニメーションの部分で、多くの人がtransform、transitionとanimationの属性に接触したことがあると信じています.
transform
トランスフォーマーtransformerによく似たtransformを見てみましょう.**まず注意しなければならないのはtransform属性が静的属性であることです.静的プロパティ!静的プロパティ!styleに書き込むだけで有効になり、アニメーションプロセスは発生しません.**transformプロパティを使用すると、要素を移動(translate)、スケール(scale)、回転(rotate)、反転(skew)できます.これらについては展開せず、興味のあることは自分で実践すればわかります.

div
{
transform: translate(50px,100px) rotate(30deg);
-ms-transform: translate(50px,100px) rotate(30deg);     /* IE 9 */
-webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */
-o-transform: translate(50px,100px) rotate(30deg);      /* Opera */
-moz-transform: translate(50px,100px) rotate(30deg);        /* Firefox */
}

transition
静的transformとは異なり、遷移と呼ばれるtransitionは簡単なアニメーション属性であり、animationの簡略化バージョンと見なすことができ、通常はイベントトリガに合わせて使用され、簡単で使いやすい.彼の文法はtransition:property duration timing-function delayです.単純なコードは遷移操作をトリガすることはなく、ユーザーの行為(クリック、浮遊など)を通じてトリガする必要があり、一般的なトリガの方式は以下の通りである.

:hover

:focus

:checked

メディアクエリトリガ

javascriptトリガ

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s ease-in-out 1.5s;
-moz-transition:width 2s ease-in-out 1.5s; /* Firefox 4 */
-webkit-transition:width 2s ease-in-out 1.5s; /* Safari and Chrome */
-o-transition:width 2s ease-in-out 1.5s; /* Opera */
}
div:hover
{
width:300px;
}

Transitionのプロパティ
ツールバーの
説明
transition-property
遷移を実行するcssプロパティ
transition-duration
移行の実行期間
transition-timing-function
遷移を実行するモーションレートカーブ
transition-delay
移行実行の遅延時間
ちなみにtransition-propertyの注意事項は、彼の値は以下の通りです.

none:属性がないと遷移効果が得られます.

all:すべてのプロパティが遷移効果を得ます.

property:トランジション効果を適用するCSS属性名のリストをカンマで区切って定義します.

すべてのアトリビュートがトランジションできるわけではありません.トランジション効果は、アトリビュートに中間点値が1つある場合にのみ使用できます.完全なリストは、ここを参照してください.
Transitionの利点は簡単で使いやすいことですが、いくつかの大きな限界があります.
(1)transitionはイベントトリガが必要なので,ページロード時に自動的に発生することはできない.
(2)transitionは使い捨てであり,繰り返しトリガしない限り繰り返し発生することはできない.
(3)transitionは開始状態と終了状態しか定義できず,中間状態,すなわち2つの状態しか定義できない.
(4)1つのtransitionルールでは,1つの属性の変化しか定義できず,複数の属性には関与できない.CSS Animationはこれらの問題を解決するために提案された.
animation
最後に最強のanimationについてお話しします.animationはkeyframes属性と組み合わせて使用されています.flashのような概念があります.animationがアニメーションを実現する効果は主に2つの部分から構成されています.
(1)Flashアニメーションのようなフレームでアニメーションを宣言する
(2)アニメーションアトリビュートでキーフレーム宣言のアニメーションを呼び出します.
キーフレームkeyframeはカスタムアニメーションを実現し、キーフレームの設定、すなわち開始点(0%)から終点(100%)までの特定のノードのアニメーションスタイルを規定します.一人で起きて、目を開けて(0%)、立ち上がって(10%)、上着を着て(40%)、ズボンをはいて(80%)、顔を整えて(100%)、このように各ノードをつなぎ合わせるのがアニメーションです.上述したtransitionの限界は,0%と100%しか定義できない状態に相当する2つの状態のみである.アニメーションでは、任意の期間ノードのアニメーション動作をカスタマイズできます.
@keyframesでアニメーションを作成する場合は、セレクタにバインドする必要があります.そうしないと、アニメーション効果は発生しません.
少なくとも以下の2つのCSS 3アニメーション属性を規定することで、アニメーションをセレクタにバインドすることができる.

規定アニメーションの名称(animation-name)

アニメーションの時間(animation-duration)

を規定する
animationプロパティはtransitionと類似しており、時間とともに要素のプロパティ値が変更されます.その主な違いは、transitionがCSSプロパティを時間とともに変更するイベントをトリガーする必要があることです.Animationは、イベントをトリガーする必要がない場合でも、要素CSSのプロパティを時間とともに明示的に変更してアニメーション化することができます.
次の例では、「myfirst」アニメーションをdiv要素にバンドルし、時間:4秒、infiniteは運動回数が無限回、alternateは次のサイクルが逆方向に再生されることを示します.

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 4s infinite alternate;
-moz-animation:myfirst 4s infinite alternate;/* Firefox */
-webkit-animation:myfirst 4s infinite alternate; /* Safari and Chrome */
-o-animation:myfirst 4s infinite alternate; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
50%{background:blue; transform: translate(20px,-20px)}
75%{background:green;transform: translate(40px,0px) scale(1.5)}
100% {background:yellow;transform: rotate(-45deg)}
}

次の表には、@keyframesルールとすべてのアニメーションプロパティが表示されます.
ツールバーの
説明
@keyframes
規定アニメーション
animation
すべてのアニメーションアトリビュートのスケッチアトリビュート
animation-name
@keyframesアニメーションの名前を指定
animation-duration
アニメーションが1サイクル完了するのにかかる秒またはミリ秒を指定します.デフォルトは0です.
animation-timing-function
アニメーションのモーションレートカーブを指定するには
animation-delay
アニメーションを開始するタイミングを指定します.既定は0です.
animation-iteration-count
アニメーションが再生される回数を指定します.デフォルトは1です.
animation-direction
アニメーションが次のサイクルで逆方向に再生されるかどうかを指定します.デフォルトは「normal」です.
animation-play-state
アニメーションを実行または一時停止するかどうかを指定します.デフォルトは「running」です.
animation-fill-mode
オブジェクトのアニメーション時間以外の状態を指定します.
参考資料:http://www.w3school.com.cn/css3/css3_animation.asp http://www.cnblogs.com/aimyfly/p/3195898.html http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135