今天先從最常使用的CCS3 Animations開始！

把整個過程設想成這是一齣戲，而你是一名導演及編劇，這樣會比較好理解。

將動畫要走的整個劇本使用 @keyframes 撰寫。
當寫完想要的一個劇本之後，在希望動起來的角色裡寫上劇本的名稱 animation-name 。
還要寫上你希望他可以動多久喔！ animation-duration 的單位通常使用s(秒)。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 動畫劇本執行時間，例如3s(3秒);
    width: 100px;
    height: 100px;
    background-color: red;
}

@keyframes 動畫劇本名稱 {
    from {background-color: red;}
    to {background-color: yellow;}
}

出現的結果會是：

如果你發現，劇本只寫了要演員從這裡(from)走到那裏(to)太過大略了，你希望你的演員能演得細緻一點，情感戲多一點，，那麼可以換一個方式來撰寫你的劇本。

@keyframes 動畫劇本名稱 {
    0%   {background-color: red;}
    20%  {background-color: yellow;}
    40%  {background-color: blue;}
    60%  {background-color: pink;}
    80%  {background-color: black;}
    100% {background-color: green;}
}

出現的結果會是：

使用%來寫，可以寫出在一個指定的時間內更多變化及更細緻的動作。

這些都成功了之後，你會發現動畫執行完你所指定的時間就會停止了，如果我希望他能重複撥放，或是能有快有慢的話該怎麼辦呢？

我們下集待續(毆)