まず、移行
トランジションとは何ですか？
時間の期間の要素のCSS属性値、別の値へのスムーズな移行、移行プロセスを、主に観察した結果である：遷移手段。
あなたは、トランジションのプロパティを設定することができます。
トランジションスタイルプロパティ、カラープロパティをサポートし、値が傾き、可視性、影、値は、変換であります
遷移の指定されたプロパティの発効。
遷移poperty：/上記のすべてのプロパティのCSS
トランジションの長さを指定するとき
遷移期間：長さ/ S / MS遷移
指定された遷移時間曲線関数
遷移タイミング機能：
1.easeデフォルトは、遅い - >速い - >、速く速くなり、スローエンドをスロースタートを遅らせます
2.linear均一
3.easeイン遅い--->ファストスロースタート、迅速な終了
4.easeアウト高速起動、終了が遅いです
5.ease・イン・アウトは、次いで、加減速、低速の端、スロースタート
遷移遅延を実行する時間を指定します。
遷移遅延：S / MS
位置遷移プロパティを書きます
1.（彼のスタイルの中の要素）遷移のスタイルで遷移元素宣言がそこに戻って行かなければなりません。
2.トリガ素子の（ホバー）上の遷移動作、トランジション効果は、決して戻ります。
移行速記：
遷移：プロパティ時間タイミング機能遅延;
最小限の道：トランジション：期間;
第二に、アニメーション
アニメーションとは何ですか？
別の変化に一つのスタイルからの要素は、その後、他のパターンに変更しているので......
一緒に使用するトランジション効果の多くを置くと同等。
キーフレーム：
1.実行時間アニメーション
この時点で2スタイル
アニメーション実装手順：
1.アニメーションとキーフレームアニメーションを宣言
アニメーション名を{@keyframes
//キーフレームを定義します
0％} {アニメーションスタイルの始まり
........
アニメーションスタイルの終わりに{100％}
}
2.コールアニメーション
アニメーション名：アニメーションの名前。
アニメーションの継続時間：アニメーションの時間を。
3.他のプロパティのアニメーション
アニメーションの遅延
4.アニメーションの速度の時間曲線機能
アニメーションのタイミング機能
使いやすさにアウト/ /リニア/和らげるイン/イーズアウトを容易に
5.animation-反復カウント
任意のアニメーションを指定します
無限の無限の価値、特定の番号/
6.animation方向：
アニメーションを再生
値が通常のノーマル0％から100％
0％、100％の逆再生を逆
再生するには別のターン
奇数前方遊び
でも、時間がプレーを逆転します
7.簡単な方法：
アニメーション：名前時間のタイミング機能ディレイの繰り返しカウント方向。
8.animationフィルモード
プレイする前と後のアニメーション表示状態を指定します
1.noneデフォルト
2.forwardsアニメーションが完了したら、最後のキーフレームの上に残ります
3.backwards（遅延の必要性）のアニメーションを開始する前に、最初のキーフレームに保持され
4.both、両方の転送を設定し、後方
アニメーションの互換性：
如果要兼容低版本的浏览器，需要在声明动画的时候加前缀
@keyframes 动画名称{}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
三.CSS优化
目的：减少服务器压力，提升用户体验。
1.优化原则
尽量减少HTTP请求的个数。
页面顶部引入css样式
将css和js放到外部独立的文件夹中
2.CSS代码优化
缩小样式文件
减少样式的重写
避免出现空的src和href
选择更优的样式属性值(能使用复合，简写的写法,就不要单独定义)
代码压缩