まず第一に、私たちはCSS3で映画をやりたい、必然的にアニメーションと属性値の両方を変換するために使用します。
使用方法を変革
まず第一に、それは、我々はすなわち、5種類の合計の組み合わせを変換：
変換：）（翻訳;
変換：回転を（）;
変換：スケールを（）;
変換：スキュー（）;
変換：Matrickを。
変換：変換（）
次はおよそ変換トーク：（）翻訳し、意味や用法が表しています。
意味：要素は、x、y軸の現在位置に移動させることができます。
#box {変換：（100pxに、翻訳 100pxに）;} このコードIDは要素がx軸とy軸100pxに（注：二つの数字をカンマで区切られた）に沿ってボックス命名されていることを意味しています。示されているように：前と移動後の比較：
変換：回転を（）;
回転させ、その後、それは数は要素の時計回りの回転を表すときに値が正の負の値とすることができる、回転要素を表すためである。負、要素の反時計回りの回転であり、単位とすることができます（度）表°の角度、RAD RADテーブル。例えば
：#box {変換：回転を（45deg / * -45deg * /）;} IDが45°ボックスの要素の回転角度で表されます。図：図における回転前後の比較。
変換：スケールを（）;
ズーム倍率を表し、素子の初期の大きさに基づいてまたはアウト要素ズームの面です。
用法：
変換：スケール（NUM）を、この時間値は、内部NUM拡大または要素の幅と高させながら減少を表します。
変換：スケール（NUM1、NUM2） ; この時間スケール幅値を表す第2の値が高いことを示す最初のどの2つの値が存在します。例えば：
#box {変換：スケール（2、3）;}このコード手段をボックス要素名前IDの幅が2倍、3倍の増幅を拡大します。前と比較した後：図に示すように。
変換：スキュー（）;
スキュープロパティは、マイターを表します。（NUM1、NUM2）スキュー：変換 ; yはNUM2を表し、同様に、Y方向はX軸方向要素に沿って傾斜され; XはNUM1、x方向、チルト、Y方向の傾きの要素という意味を表します。傾き;「度」の単位でスキュー;
例えばコード：#box {オート;変換：スキュー （30度、30度）;}
図の正面に示すように造影効果が表示されます。
トランスフォームの原点
これは、要素を翻訳されたポイントの位置を変更することです。要素x軸とy軸を変化させることが可能な2D変換素子。3D変換素子は、Z軸を変更することができます。
注：このプロパティは、変換プロパティを使用する必要があります。
アニメーションの使用
原理：フレームアニメーションによってフレーム。ウィル全体の動きは、100個の部分に分け。
アニメーションは、ページのロード後にトリガされ、再生回数を設定することができます要素そのものではなく、スタイル属性に作用し、演奏されている可能性があり、あなたはアニメーションのより多くの自由を達成することができ、キーフレームの概念を使用することができます。
アニメーション名:;アニメーション名（自由に書くことができます）
アニメーション-DURATION :;アニメーション時間を表すには、サイクル、単位完了するために必要な：秒またはミリ秒
のアニメーション遅延を:;映画が始まるまでの遅延時間を表し、
アニメーション、iteration-をカウント:;繰り返しアニメーションを表し、デフォルト値は1であり、無限の無限の数
のアニメーションタイミング機能:;モーションアニメーション形式、速度曲線で
アニメーション方向：属性定義アニメーションが逆回転で再生されるべきかどうか。ここで、代替：フォワードいずれか一方が逆
逆：逆は常に
（デフォルト）正常：常に前方
のアニメーションが表示されるアニメーションの規定の前または後に：アニメーションフィルモード。
なし（デフォルト値）：移動の終了後に初期位置への復帰は、遅延の場合には、これは0％は、遅延の後に有効にする
遅延前ので0％効果的な遅延の場合：逆方向
前方：運動の終了後終わりに停止
両方：前後に同時にテイク効果
にアニメーション・フィル・モード：次のようにCSSコードは次のとおり
<style> #box1{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move;/* 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效 */ } #box2{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode : backwards; /* 在延迟的情况下，让0%在延迟前生效 */ } #box3{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: forwards;/* 在运动结束的之后，停到结束位置 */ } #box4{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: both;/* backwards和forwards同时生效 */ }
@keyframes move { 0%{ transform:translate(0,0); background:blue;} 100%{ transform:translate(400px,0)} }
#box{width:100px; height:100px; background:red; margin:10px; animation: 3s wjt infinite;/* 无限次数 */ animation-direction: alternate; } @keyframes wjt { 0%{ transform:translate(0,0);} 100%{ transform:translate(400px,0)} } </style>
コンポジット言葉遣い：アニメーション：2S 3S wjtリニア無限 ;
それぞれ以下のとおりです。左から右へ：サイクルを完了するのに必要なアニメーション時間、アニメーションの開始までの遅延時間を、アニメーション名、アニメーションの速度曲線、完成したアニメーションの数。
キーフレーム
@keyframes +アニメーション{名前
{}から
{}まで
}
0％に相当する位置から開始点を表し、終了位置を表すためには、100％に相当し;
注：デフォルトでは、要素の移動が完了すると、私たちは、開始位置に留まります。
ここでは、移動物体内部のラインアニメーションボールがあります。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ width: 600px; height: 600px; border: 1px solid black; position: relative; } #main .main-pic{ width: 100px; height: 100px; position: absolute;left: 0;top: 0; animation: 4s -2s wjt linear infinite; transition: 4s; border-radius: 50%; background:linear-gradient(yellow , hotpink) } @keyframes wjt{ 0%{transform: translate(0 , 0)rotateZ(0deg);} 25%{transform: translate(500px , 0)rotateZ(360deg);} 50%{transform: translate(500px , 500px);} 75%{transform: translate(0 , 500px)rotateZ(360deg);} 100%{transform: translate(0 , 0)rotateZ(360deg);} } </style></head><body> <div id="main"> <div class="main-pic"></div> </div></body>
