昨天文章的案例中，其實也有包含動畫的部分，但對於新手來說有點過於複雜，今天將會用較淺顯易懂的範例來說明透過CSS語法撰寫動畫。昨天的文章中有提到， transition轉場和animation動畫的部分，這兩個語法就是CSS的動畫核心。

Transition的簡要說明

Transition轉場的主要功用，事件發生前的狀態A(50px的正方形)，在事件觸發後會變成B(250px的正方形)。變化不是只有長寬變化而已，顏色和字體等屬性皆能變化。可以參考以下的CSS語法，相關說明已經加在註解：

.box{
width:50px;
height:50px;  
transition-property:all; /*預設值可省略*/
transition-duration:1s; /*轉場需要的時間*/
transition-timing-function:linear; /*轉場依據貝茲曲線的速率轉換，此為線性，速率均等的意思*/
transition-delay:0.5s; /*觸發事件後多久會開始轉場*/
}
.box1:hover{  
  width:250px;
  height:250px;
}

上述語法可以簡化成以下語法：

.box1{ 
width:50px;
height:50px;  
transition: all 1s linear 0.5s;
}
.box1:hover{  
  width:250px;
  height:250px;
}

Animation的簡要說明

這邊設定條件動畫觸發條件，滑鼠移上去後就會觸發動畫，相關說明已經加到備註中，可以參考以下語法：

.control:hover ~.box3{ 
    /*滑鼠移到.control上，對.box3做事*/
  animation-name:box3; 
  /*設定動畫名稱*/
  animation-duration:4s; 
  /*動畫持續4秒*/
  /*   transition-timing-function:ease; */
  /*動畫速率分布：ease為預設值*/
/*   animation-iteration-count:1; */
  /*動畫重複次數：1為預設值*/
}
  @keyframes box3{
  0%{
    transform:scale(0.5); /*動畫0秒，變形成原大小的50%*/
    }
   50%{
    transform: rotate(180deg) scale(1);/*動畫跑到50%，變形成原大小，旋轉至180度*/
    }
  100%{
    transform: rotate(360deg) scale(2);/*動畫跑到100%，變形成原大小的2倍，旋轉至360度*/
    }
  }

Animation的縮寫

這邊也有製作box4與box5，keyframe結構與box3相同，但動畫撰寫方式為縮寫，可參考以下CSS語法：

.control:hover ~.box4{
  animation:box3 4s linear infinite;
  /*縮寫：動畫名稱 動畫秒數 移動速率分布(線性) 播放狀態(無限循環)*/
}
.control:hover ~.box5{
  animation:box3 4s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite;
/*縮寫：動畫名稱 動畫秒數 移動速率分布(貝茲) 播放狀態(無限循環)*/
}

這邊box4動畫運作速率為線性，表示動畫從頭到尾是均速；box5是貝茲曲線，為自定義速率；box3為預設值，移動速率分布為ease，會快速進入後中間稍停再快速到結尾。

範例參考

由於篇幅有限，在本次的範例中只是簡易的呈現轉場與動畫的示範，可以兩者作結合或用更多的延伸。動畫除了旋轉以外也能進行位移，但在CSS能設定的觸發條件僅限於滑鼠移到物件上，動畫離開滑鼠動畫就會中斷。若需要有更多動畫觸發條件，需要透過JavaScript語法進行設定。本次文章使用之範例可以參考以下的codepen連結，可將滑鼠移動到盒子中觀察變化。

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/WNJopxQ

是不是很簡單！明天就會開始說明JavaScript的部分，我們明天見囉！