css 3 transition transform animationプロパティについて

1,transitionプロパティ
個人的にはtransitionの過度な属性を使うことに慣れており、簡単で使いやすい.彼をanimation簡略化バージョンと呼んでいます.
例:
.contain{
width: 392px; 
position: relative; 
bottom: -20px; 
opacity: 0;}
.contain.on{ 
bottom: 0; 
opacity: 1;
-webkit-transform:translate(-100px,100px);
 transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out; 
 -webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  }
ある条件を満たす場合にcontainに追加する.onクラスは、直ちにx移動-100 px、y移動100 px、1500 msを経ることができる.遅延2 sは、500 msの「下から上へ透明からソリッドに」アニメーション効果を実行します.all ease-in 500 msではなく、的確な書き込みに注意してください.パフォーマンスが低すぎる
構文:

transition: property duration timing-function delay;

しかし、注意しなければならないのは、火狐ブラウザはtransitionの最後の数値に対して厳格で、遅延が0の場合、後ろのSを無視することが多いので、火狐には効果がありません.
Transitionで発生した特殊な問題:
.aaが設定動作を完了すると元に戻り、animation設定forwardsプロパティを変更すると元に戻ります.
ソリューション:aa{display:inline-block;}またはdisplay:blockに設定します.
2,animationプロパティ
animationプロパティはtransitionプロパティよりもkeyframesルールを含んで現在のフレームを明示的に制御するプロパティを多く含むため、より柔軟です.
例:
@keyframes guideDown{     0%,100%{background-position: 0 -352px;}     50%{background-position: 0 -360px;} } @-webkit-keyframes guideDown{     0%,100%{background-position: 0 -352px;}     50%{background-position: 0 -360px;} } @-ms-keyframes guideDown{     0%,100%{background-position: 0 -352px;}     50%{background-position: 0 -360px;} } @-moz-keyframes guideDown{     0%,100%{background-position: 0 -352px;}     50%{background-position: 0 -360px;} }
.moveDiv{ 
animation:guideDown 2s infinite;
-webkit-animation:guideDown 2s infinite; 
-moz-animation:guideDown 2s infinite; 
-ms-animation:guideDown 2s infinite; 
-o-animation:guideDown 2s infinite;
}
infiniteとは無限ループを指し、一度だけ実行する場合はanimation-fill-mode:forwardsを限定するだけでよい.
構文:

animation: name duration timing-function delay iteration-count direction;

timing-function状態変化速度ease linearのほかcubic-bezierカスタマイズ速度、カスタマイズサイトhttp://cubic-bezier.com/#.17,.67,.83,.67.
もう1つは,均一な速度でキーフレームジャンプのみを必要とする場合,steps遷移方式を採用することである.開始終了keyframeを定義してsteps(n)に基づいてキーを自動的に割り当てるだけです.
delayは負の値で、アニメーションはすぐに実行できますが、指定したdelay値の規定時間をスキップしてアニメーションに入ります.
3,transformプロパティ
transformはアニメーション属性のように見えますが、実は静的属性で、styleに書くと直接明示的で、変化過程がありません.その用途は主に特殊な変形に用いられ、複数の静的スタイルを定義し、transitionとanimationによって属性値をどのように変更するかを制定し、アニメーション効果を実現する.
プロパティスタイルを変更するプロパティには、translate 3 d(3 d位置)、rotate(回転)、skew(傾斜度)、scale(拡大縮小)、matrix(cssマトリクス)があります.
構文:

transform: none|transform-functions;

PS:アニメーションDOM要素にスタイルを追加-webkit-transform:transition 3 d(0,0,0)または-webkit-transform:translateZ(0);どちらのアトリビュートもGPUハードウェアアクセラレータモードをオンにして、ブラウザがアニメーションをレンダリングするときにCPUからGPUに移行するようにします.実はこれは小さな手口で、Hackとも言えます.-webkit-transform:transition 3 dと-webkit-transform:translateZは実は3 Dスタイルをレンダリングするためですが、私たちは値を0に設定した後、本当に3 D効果を使用していません.しかし、ブラウザはGPUハードウェアアクセラレータモードをオンにした.参照先:http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html
また、absolute、left:50%、top:50%の後に-webkit-transform:translate(-50%、-50%)を設定します.水平垂直方向の中央揃えが保証されます
多くのアニメーション効果は、結果として複数のアトリビュートを実装します.
例えば、円球楕円軌跡運動を描くには、円球transform:rotate(1 turn)を同時に外層div translateY(200 px)で実現する必要がある