動畫樣式解析

動畫解析

1、過分：（一個動畫須要有開始，過程，結束的時間，咱們通常只
須要描述開始與結束就行，過程電腦自動補充）
    一、tansition-duration,過渡時間。過渡時間寫在不一樣屬性上
    有不一樣的效果，開始有，結束有（原元素上）,開始沒有,結束有
    （寫在僞類屬性上),開始沒有，結束有（過分時間寫原元素
    上，僞類裏面過渡時間0s）。
    二、transition-delay,過分延時。正數表示這個效果延遲多少
    秒以後延遲，負數表示元素提早多少變化。
    三、transition-property,規定過渡元素做用於那條元素上
    面。可選值：none全部過分效果都沒用，all表示全部過分值都
    有效果
    四、transition-timing-function,貝塞爾曲線以下圖（瞭解）
   ![圖片.png](/img/bVbIi5j)

---

2、主動式動畫
    一、animation-name（定義動畫名稱）
    二、animation-duration（運動時長）
    三、animation-timing-function（運動速率）
    四、animation-iteration-count:infinite（運動方式）
    五、animation-fill-mode（動畫結束時候的狀態）
        可選值：
            一、backwards 默認回到初始位置
            二、forwards 執行動畫完成後保留最後狀態
    六、animation-direction: 放置元素運動的時候出現不連貫的
    狀況
        可選值：
            一、normal(0~100): 瞬間切回去,每一次都是正向播
            放。
            二、reverse(100~0); 從100%的位置到0%的位置。
            三、alternate(0~100~0);從0%出發來回播放,大於等
            於2能看到效果
            四、alternate-reverse(100~0~100) 從100%出發來
            回播放,大於等於2能看到效果。