在了解了 animation 和 @keyframes 這兩個核心概念後，今天我們就來實際動手操作，將理論化為生動的視覺效果！我們的目標很明確：讓一個紅色的方塊在 5 秒內，流暢地從畫面左側移動到右側，並持續無限循環。

首先，這是我們的 HTML，超簡單，就一個 div：

HTML
<div class="move-box"></div>

接著是重頭戲 CSS。我們先給這個方塊一些基本樣式，像是寬高、顏色，最重要的是 position: relative;，這樣 left 屬性才能作用。然後，我們用 animation 屬性，給它一個叫做 slide-right 的動畫劇本，設定它跑 5 秒，並且 infinite (無限次) 播放。

CSS

.move-box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative; 

  animation: slide-right 5s infinite;
  -webkit-animation: slide-right 5s infinite;
}

@keyframes slide-right {
  from { /* from 等於 0% */
    left: 0%;
  }
  to { /* to 等於 100% */
    left: 80%; 
  }
}

@-webkit-keyframes slide-right {
  from { left: 0%; }
  to { left: 80%; }
}

animation屬性

animation: slide-right 5s infinite 是一個簡寫屬性 (shorthand property)，它結合了多個動畫子屬性
animation-timing-function: ease ：動畫的速度曲線。您沒有特別指定，所以預設是 ease，表示動畫開始和結束時會比較慢，中間較快。這讓移動感覺更流暢。
animation-delay: 0s ：動畫開始前的延遲時間，0s是預設值

@keyframes中的 from 和 to

from 和 to 是 @keyframes 的語法糖 (syntactic sugar)，分別代表0%和100%這種寫法在只有兩個關鍵影格時很方便，讓程式碼更簡潔易讀。

-webkit- 可以讓你支援一些老舊瀏覽器或特定環境，提高相容性

成品:short