まず、移行
トランジション（遷移）が特徴の一つは、要素を1つの形式から変換されたときに、別のためには、JavaScriptやFlashアニメーションせずに使用することができる、破壊CSS3とき加算要素パターンの効果。
遷移において円滑な遷移を容易にするために、変更を達成することができ、（A及びBは、私たちの世代を指す）、CSS3トゥイーン（遷移）であれば、現在の要素と「プロパティ」として、すなわち、二つの状態を実現することができます2つの状態の間でホバリングを使用しますが、移行を行うために状態をホバーに限定されないデモ。
構文：
トランジション：;移行が開始するときの時間の運動曲線を過ごすために属性にする
属性の複数のセットが変更された場合、またはカンマで区切って指定します。
属性：
| 説明 | CSS | |
|---|---|---|
| 遷移 | 簡略性は、4つの遷移プロパティでプロパティを設定するために使用されます。 | 3 |
| 遷移プロパティ | 移行規定の名前は、CSSのプロパティを適用します。 | 3 |
| 遷移期間 | それはトランジションエフェクトを定義するのにかかる時間。デフォルトは0です。 | 3 |
| 遷移タイミング機能 | 効果を所定の時間曲線を遷移。デフォルトでは「楽」です。 | 3 |
| 遷移遅延 | 規定のトランジション効果を開始すると。デフォルトは0です。 | 3 |
第二に、トランジションのプロパティを設定します
トランジションアニメーションの要素のCSSプロパティの名前を指定するには、このプロパティを使用します。
構文：
遷移プロパティ：なし| すべて| [<IDENT>] [、<IDENT>] *。
-
- なし：要素がないこと。
- すべて：テーブル内のすべての要素のデフォルト値であって、前と：要素の後に、
- IDENT：新しく追加されたCSS3のプロパティを含むすべてのプロパティを含むことができるCSSプロパティリストを指定します。
第三に、移行時間を設定します
変換された動画の長さを定義するために、このプロパティを使用します。
構文：
遷移持続時間：<時間>、<時間>] *。
-
- 擬似要素の後に、初期値は、すべての要素に対して、0であり、そして：前と
- 例えば、秒の秒0.5秒で、このユニットは書く必要があります
第四に、遷移のタイプをアニメーション（モーションプロファイル）
この属性は、トランジションアニメーションの種類を定義するために使用されます。
構文：
遷移タイミング機能：楽| リニア| 使いやすさで| 楽アウト| 使いやすさにアウト| cubicbezier {<番号>、<番号>、<番号>、<番号>}
-
- 容易：立方ベジェ（0.25,0.10.25,0.1）関数、すなわち、立方ベジェと同等のスムーズな移行を、。（デフォルト値）
- 線形：線形遷移、立方ベジェ（0.0,0.0,1.0,1.0）関数と等価
- 使いやすさで：低速から高速まで、立方ベジェ（0.42,0.0,1.0,1.0）関数と等価
- 楽アウト：速いが減速するから、立方ベジエに相当（0,0,0.58,1.0）機能
- 緩和・イン・アウト：低速から高速、その後遅くする、立方ベジェ（0.42,0.0,0.58,1.0）関数と等価
- 立方ベジエ：特殊効果立方ベジェ曲線。
モーションプロファイルの概略図：
第五に、遅延時間を設定
この属性は、開いた状態へのトランジションアニメーションの遅延時間を定義するために使用されます。
構文：
遷移遅延：<時間>、<時間>] *。
-
- 初期値は、すべての要素に対して、0で、：beforeと：後の擬似要素。
- 単位は秒（秒）またはMS（ミリ秒）に設定されている時には、非ゼロ、ゼロ、正の整数に設定され、負の整数ことができます
- アクションが遮断される前に、遷移アニメーションが、その時点で表示される時は負です。
- 遷移アニメーションがトリガー遅れている時は正です。
第六に、トリガモードを設定します
CSS3 动画一般通过鼠标事件或状态定义动画，如 CSS伪类和 JavaScript 事件。
CSS 动态伪类
| 动态伪类 | 作用元素 | 说明 |
| :link | 只有链接 | 未访问的连接 |
| :visited | 只有链接 | 访问过的链接 |
| :hover | 所有元素 | 鼠标经过的元素 |
| :active | 所有元素 | 鼠标点击元素 |
| :focus | 所有可被选中的元素 | 元素被选中 |
JavaScript 事件包括：click、focus、mousemove、mouseover、mouseout 等事件。
还有另外一种方法是 使用 CSS3 媒体查询来实现过渡动画。