、CSS3トランジション
（A）、CSS3遷移プロファイル
CSS3トランジション徐々に別の効果のために一つのスタイルから変更する要素です。
トランジションエフェクトを実装する二つの要素：
- これはCSSのプロパティにエフェクトを追加するための規定
- 効果の持続時間の規定
カスタムアニメーションのルール
遷移遷移時間の指定された期間内に「他の値」への遷移「の値」から（効果）属性素子
（B）は、遷移特性
構文：{遷移：移行法の期間は属性名}
- トランジション・プロパティ プロパティ名（これは、属性の名前を持つプロパティがある場合、それは、カンマで区切られたプロパティ名の間に複数のプロパティである場合、あなたはすべてを使用することができ、すべてのプロパティが、場合）を示すために、どのプロパティ変更。
- 遷移持続時間 （秒またはミリ秒）の長さの変化の持続時間
- 遷移タイミング機能 （例えば、最初のスロー絶食後/後遅く）を実現モード遷移、関数の具体的な実現が実現されます。
- 遷移遅延 秒またはミリ秒を待って開始する前に、遷移時間。
遷移タイミング機能 プロパティ値
- 線形 均一な（線形変化）
- 容易に ゆっくりと、最初のゆっくりとした後、すぐに
- 使いやすさで 最初のスロー絶食後
- 楽アウト後にスローダウン
- 使いやすさにアウト 速い遅い真ん中の遅い終わりの初めに
例：
二重元の状態は赤、背景勾配によって青に赤3Sのセット内の遷移特性の変動の使用の上にマウスは、テキストの色は次第に白くなります。
図1は、第一、divタグの元の状態を定義します
マウスは、上記置いたとき2、状態を設定します。
1 <！DOCTYPE HTML > 2 < HTML のlang = "EN" > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル>过渡</ タイトル> 6 < スタイル> 7つの DIV { 8 の高さ：100pxに。 9 幅：300ピクセル; 10 行の高さ：30px ; 11 国境半径：5pxの; 12 ALIGN-含量：センター; 13 色：赤。 14 背景色：＃999 。 15 遷移：すべて1リニア。 16 } 17 DIV：ホバー{ 18 色：白。 19 / * 背景色：＃007; * / 20 背景：線形勾配（下に、＃1 f0f、＃00F） 21 } 22 </ スタイル> 23 </ ヘッド> 24 < ボディ> 25 < DIV 整列= "中心" スタイル= "フォントサイズ：30px" >遷移</ DIV > 26 </ ボディ> 27 </ HTML >
パフォーマンス結果：（以下のトランジション効果後に、初期状態、中間体を表示するだけであるので、遷移は動的効果があるため）
初期
真ん中
遂に
二、CSS3アニメーション
どのような効果を実現するために（A）、CSS3アニメーション
アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化です。あなたは何回限り多くのスタイルを変更することができます。アニメーションはアニメーションプロパティによって行われます。
0％と100％に相当し、「に」「から」、またはキーワードで所定時間の変化率、。0％は、アニメーションが100％に行われ、アニメーションの始まりです。最適なブラウザのサポートのために、あなたは常に0％とセレクタの100％を定義する必要があります。
2つの要素をアニメーション化します：
- 1、首先要定义一个动画 ，定义一个@keyframes 规则（关键帧）
- 2、调用动画 动画定义好之后，使用animation 属性调用动画
了解动画的形成原理：
是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果
（二）、animation属性设置动画效果
animation属性取值
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
- animation-name 规定@keyframes 动画名称
- animation-duration 规定一个动画完成的周期所花费的秒或毫秒。默认值为0，
- animation-timing-function 规定动画的速度曲线。默认值为ease
- animation-delay 动画开始前等待的时间。取值可为负（-2s 动画跳过 2 秒进入动画周期），属性不兼容 IE 9以及更早版本的浏览器.
- animation-iteration-count 规定动画播放的次数。默认值为1
- animation-driection 规定动画是否在下一周期逆向地播放。默认值是normal
- animation-play-state 规定动画是否正在运行或暂停。默认值是running
- animation-fill-mode 规定对象动画时间之外的状态
animation-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
用动画animation属性实现在位置变化的同时颜色也发生相应的变化。
颜色：由红色—黄色—蓝色—绿色—红色；
位置：距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px（回到原地）
animation属性：@keyframes(关键帧) 动画名称为mycolor；一个动画周期为5s；动画运动先慢后快再慢ease；动画开始前等待2s；无限(infinite)循环播放；动画正在运行(runing)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <style> 7 div{ 8 width:400px; 9 height:400px; 10 background:red; 11 position:relative; 12 animation-name:mycolor; 13 /*animation-name规定@keyframes 动画名称*/ 14 animation-duration:5s; 15 /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/ 16 animation-timing-function:ease; 17 /*animation-timing-function规定动画的速度曲线*/ 18 animation-delay:2s; 19 /*animation-delay规定动画何时开始。默认值为0*/ 20 animation-iteration-count:infinite; 21 /*animation-iteration-count规定动画播放的次数*/ 22 animation-direction:alternate; 23 /*animation-driection规定动画是否在下一周期逆向地播放*/ 24 animation-play-state:running; 25 /*animation-play-state规定动画是否正在运行或暂停*/ 26 } 27 @keyframes mycolor 28 { 29 0% {background:red;left:0px; top:0px; } 30 25% {background:yellow; left:200px; top:0px;} 31 50% {background:blue;left:200px; top:200px} 32 75% {background:green;left:0px; top:200px;} 33 100% {background:red;left:0px; top:0px;} 34 } 35 </style> 36 </head> 37 <body> 38 <div></div> 39 </body> 40 </html>
除了可以这样每个属性单独设置，也可以使用animation 的简写属性：
1 div{ 2 width:400px; 3 height:400px; 4 background:red; 5 position:relative; 6 animation:mycolor 5s linear 2s infinite alternate; 7 }