今天要介紹的是如何利用 CSS 創建簡單的動畫效果，並了解 @keyframes 的基本用法。@keyframes 是 CSS 中用來定義動畫的是 CSS 中用來定義動畫的核心工具，透過設定元素在不同行為階段的狀態，並以時間軸的方式創造流暢的過渡效果。

1. 定義動畫的關鍵

@keyframes fadeInOut {
   0% {
       opacity: 0;
   }
   50% {
       opacity: 1;
   }
   100% {
       opacity: 0;
   }
}

@keyframes 代碼使用了百分比來表示時間的進程：

• 0%: 動畫開始時，元素的透明度（opacity）為 0，即完全不可見。
• 50%: 到達中間點時，透明度變為 1，元素完全顯示。
• 100%: 在動畫結束時，透明度再次變為 0，元素重新消失。

2. 應用動畫到元素

.animated-box {
   width: 200px;
   height: 200px;
   background-color: purple;
   animation: fadeInOut 3s ease-in-out infinite;
   margin: 50px auto; 
}

在這段代碼中，我們為 .animated-box定義了一個 200x200 像素的紫色方塊，並將 fadeInOut 動畫應用於其上。這裡用到了 animation 屬性，其中包含幾個重要的設定：

• 3s: 指定動畫的持續時間為 3 秒。
• infinite: 讓動畫無限次循環。
• ease-in-out: 使動畫在開始和結束時逐漸加速和減速，達到更平滑的效果。

這樣的組合讓方塊在 3 秒內完成一個淡入淡出的循環，並且以平滑的方式不斷重複。

3. 結果呈現