3Dアニメーション（CSS3）-animation
; CSS3アニメーション機能は、破壊一つで正確に制御することができ、又は映画のグループは、共通の複数のノードは、複雑なアニメーションを提供することによって達成される
CSS3を介して、我々はページの数に置換することができるアニメーションを作成することができ
アニメーション画像、FlashアニメーションとJavaScript。
トランジション（遷移）アニメーション呼ばれる最初、初期状態からの遷移である
アニメーションを生成し、このプロセスの終了状態です。これは、いわゆる状態を指す
等サイズ、位置、色、変形（変換）、これらの属性を。スルーCCS
遷移は、最初に定義され、二つの状態を尾ことができ、それはアニメーションの最も単純な種類です
。
第二は、キーフレーム（キーフレーム）アニメーションと呼ばれています。それは最初の異なる
キーフレームアニメーションが複数定義することができ、2つの状態しか定義されて遷移し、最後のアニメーション
の状態を、またはキーフレームと同様に、第一遷移アニメーションを定義することができ
、フレームと最後の2つのキーフレームをそして、キーフレームアニメーションは、あなたがどんな定義することができ
、より複雑なアニメーションを実現することができることを意味し、多くのキーフレームを、。
@keyframes規則によって、あなたは、アニメーションを作成することができます。
アニメーションの原則を作成すると、CCSはスタイルで徐々に変化は、試料の別のセットであるだろうということである
タイプ。アニメーション中に、あなたは何度もこのCSSスタイルを変更することができます。
所定の割合「から、いずれかのキーワードによって発生時変化
」と「に」、100％、0.01％、アニメーションの開始時間であり、0％、100％に相当する
アニメーションの終了時間。最適なブラウザのサポートのために、あなたが開始する必要があり
、最終的な0％の定義とセレクタの100％を。、
セレクタにバインドしてくださいアニメーション@keyframesを作成する場合
、それがアニメーションではないでしょう。
少なくとも次の2つのプロパティのCSS3アニメーションを指定することにより、アニメーションを結合することができる
アニメーション所定名;セレクタ場合アニメーションの所定の長さ。
構文：
animationname @keyframes
{
キーフレームセレクタ{-css-スタイル;}
}
説明：
;：animationnameアニメーションの宣言された名前
：アニメーションの長さを分割する、百を使用することができるキーフレーム・セレクタは、
「から」、フォーム上の点を、また、使用することができます「へ」の形。
「から」0％から100％に相当する形態「へ」。
常に推奨割合を使用しています。
構文：
アニメーションタイミング機能：値;
説明：
アニメーションアニメーションタイミング、所定の速度プロファイル機能、
リニア：アニメーションの速度は、最初から最後まで同じです。
楽：デフォルト。低速でアニメーションの開始は、その後、スピードアップの終了前に遅く
やすイン：低速でアニメーションの開始。
楽アウト：ローエンドのアニメーション。
使いやすさにアウト：アニメーションが開始し、低速で終わります。
立方ベジェ（N、N、 N、N）： 立方ベジェ充填関数の値が、可能
な値は0から1までの値です。
構文：
アニメーション-反復-COUNT：N- |無限;
説明：
アニメーションは、反復-COUNT属性回アニメーション再生の数を定義します。
N：アニメーション定義された値の数。
無限：アニメーションを再生しなければならない無限の規定。
構文：
アニメーションプレイステート：一時停止|ランニング;
説明：
アニメーションプレイ-State属性は、アニメーションが実行中または一時停止して指定します。
注：あなたが再生できるようにするには、JavaScriptでこのプロパティを使用することができます
アニメーション処理を一時停止します。
彼は一時停止：アニメーションの規定は中断されました。
ランニング：アニメーションの規定が再生されています。
コードは以下の通りであります：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: green;
animation: anim-test 4s;
}
@keyframes anim-test {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(200px,0,0);
}
50% {
transform: translate3d(200px,200px,0);
}
75% {
transform: translate3d(0px,200px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>効果：