css 中的動畫元素

動畫元素的屬性是：animation

位移元素的屬性是：transtion

那我們就來看看他們的相同點和不同點都有哪些：animationVS transtion

相同點：都是隨著時間改變屬性。

不同點：transtion需要出發一個時間，才會隨著時間改變其CSS屬性。

　　　　而animation在不需要出發任何時間的情況下也可以顯示隨著時間變化來改變元素CSS的屬性值，從而達到一種動畫的效果。CSS的animation就需要明確的動畫屬性值。
　　　　初始效果——動畫幀——動畫幀——最終的效果

　　　　以下是我整理的幾個animation的屬性：
1、animation-name： 必要屬性
檢索或者設定物件所應用的動畫名稱
必須與規則@keyframes配合使用。

定義關鍵幀：
@keyframes name｛
from｛｝
to{ }
｝
或者
@keyframes name{
0%{}
50%{}
100%{}
}

  @keyframes zhuan {
            from{transform: rotate(30deg)}
            to{transform: rotate(180deg)}
            /*首尾一般是重合的，若是不重合，轉完會卡一下，迅速到開始的位置上*/
        }

2、animation - duration{} 必要的
檢索或者設定物件動畫的持續時間，單位是s或者ms。

    transition-duration:1s;

3、animation - delay 非必要
// 檢索或者設定物件動畫延遲的時間。

4animation - timing -function:
動畫過度型別的屬性值
屬性值有“;inear 勻速 ease平滑過度 ease預設值，平滑過去 ease-in 由慢到快
ease=out 由快到慢 ease-in-out 由慢到塊再到慢
step-start 馬上跳到關鍵幀畫滿的最後一幀。

5、animation - iteration - count： value；（數值）
infinite; （無限迴圈）
設定動畫的迴圈播放次數

6、animation -direction：normol； 正常方向
reverse 反方向執行
alternate 正常執行再反方向執行，並且持續執行
alternate-reverse 反向執行再正常執行並且持續執行。
設定動畫在迴圈中是否反向執行

7、animation-fill-mode：none；預設值 在運動結束後回到初始位置，在延遲的情況下，讓0%在延遲後生效。
backwards； 在延遲的情況下，讓0%在延遲前生效。
forwards； 在動畫結束後，就停流在結束位置。
both； backwards和forwards屬性同時生效。
動畫在播放前後，動畫效果是否可見。

8、animation-play-state：running； 運動
paused； 暫停
通過滑鼠控制動畫執行或暫停。

而transition運用就比較簡單：

 transform: translate(100px,200px);
            /*右平移100px 下平移200px  */
            transform: rotate(45deg);
            /*旋轉45度*/
            transform: scale(1.5);
            /*放大1.5倍；谷歌瀏覽器最小字元12px；若想得到一個10px的字可以設定20px再縮小*/
        /*若想得到這三個效果同時出現，則可以： transform:translate(100px,200px) rotate(45deg) scale(1.5);*/