今天要來介紹最後的動畫效果

Animation

Transition、Transform為轉場動畫
如果希望載入頁面後直接開始動畫，就可以來使用 Animation
必需搭配 @keyframes ，用來控制 CSS 屬性做變化
想要動畫重複執行，就只能依靠 Animation了~(animation-iteration-count)

從 @keyframes 開啟我們的animation

＠keyframes animation-name
{ animation-name /*動畫名稱*/
　keyframes-selector /* 關鍵影格選擇器 (from-to/%) */
  css-styles; /*CSS樣式*/
　　}
}

keyframes-selector 關鍵影格選擇器

from 表示開始，也可以用 0% 表示，to 表示結束，也可以用 100% 表示
如果沒有開頭或結尾，程式會自動演算出來，不過結果可能會與想像有落差
相同屬性會後取代前

• from-to

範例:

.box2{
    background-color: rgb(255, 240, 127);
    animation:move 5s infinite;
}
@keyframes move{
    from{
    left:0;
    }
    to{
    left:375px;
    }
 }

實作結果:
一開啟網頁便會花5秒的時間從左0px向右移375px，且反覆發生

• %

範例:

.box2{
    background-color: rgb(255, 240, 127);
    animation:move 5s infinite;
}
@keyframes move{ 
    0%{
        left:0;
    }
    50%{
        left:375px;
    } 
    to{
        left:500px; 
    } 
}

實作結果:
一開啟網頁會花5秒的時間從左0px向右移，並在50%時到達375px的位置，最後要到500px位置，反覆發生
50%時的位置

最終位置

animation 屬性

• animation-name: 動畫名稱

• animation-duration: 動畫播放1次的時間（預設值為0）
  一定要有 animation-name 和 animation-duration

• animation-iteration-count:動畫播放次數（預設值為1[infinite連續播放]）

• animation-delay: 動畫延遲時間(若為負值，則會快轉)

• animation-timing-function: 動畫加速度函式（預設值為 ease）

• animation-direction:動畫播放方向（預設值為normal）
  normal 正向播放（預設值)
  reverse 逆向播放
  alternate 一次正向、一次逆向播放
  alternate-reverse 一次逆向，一次正向播放

• animation-fill-mode:動畫播放前後狀態（預設值為none）
  none：預設值，不論動畫播放次數，結束後一律返回原始狀態
  forwards：動畫結束後，保持在最後一個影格狀態
  backwards：動畫結束後，保持在第一個影格狀態
  both：依據動畫的次數或播放方向，保持在第一個影格或最後一個影格狀態

• animation-play-state:動畫播放/暫停（預設running）

當 animation 屬性合在一起時

有以下的固定順序:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

如果一個元素同時有多個 animation 屬性，就要用 , 隔開
e.g.
animation:move 5s infinite;lalala 3s ;

耶~介紹完了CSS動畫屬性，我們明天就來時做看看網頁動畫吧~