---
# System prepended metadata

title: "\U0001F3C5 Day 37 - keyframes 練習"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 37 - keyframes 練習

[@keyframes](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes) 是 CSS 中設定動畫行為的功能，它允許你設定元素在動畫過程中不同時間點的樣式狀態。透過設定多個關鍵影格，創造出簡單到複雜的各種動畫效果。

使用範例：
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/fhljksmg-the-styleful/embed/yyYybLj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/fhljksmg-the-styleful/pen/yyYybLj">
  Untitled</a> by 脆脆 (<a href="https://codepen.io/fhljksmg-the-styleful">@fhljksmg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 題目
使用此 [CodePen 範本](https://codepen.io/fhljksmg-the-styleful/pen/zxvxwBb?editors=1100)，依照提示在 CSS 的 `...` 處完成動畫效果。
提示：設定區塊背景色初始為藍色，過渡到 50% 時轉為綠色，最後再轉為黃色。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/fhljksmg-the-styleful/pen/OPyPmXm?editors=1100
-->




回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/wBKdqYM) |
|  02  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/pvjPWLK) |
|  03  |  ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/qEOmPvd) |
|  04  |  老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/VYvbrYP?editors=1100) |
|  05  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/LEpyOxb) |
|  06  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/empWyVE?editors=1100) |
|  07  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/MYamOYR) |
|  08  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/ByoRrdP) |
|  09  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/PwPmdeY) |
|  10  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/MYamPVB?editors=1100) |
|  11  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/WbQjapE?editors=1100) |
| 12 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/EaVXjNd?editors=1100)|
| 13 | 平平 | [Codepen](https://codepen.io/ypinpin/pen/yyYXOpK)|
|  14  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/zxvzBOV?editors=1100) | 
|  15 |  7lun  |[Codepen]([連結](https://codepen.io/mfyvqhsn-the-bold/pen/vENZKmm?editors=1100)) | 
|  16  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=NPGgYJe) |
|  17  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/QwjgXaV) |
|  18  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/JoYydZx?editors=1100) |
|  19  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/xbwLRMB?editors=1100) |
|  20  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/XJmaZMV) |
|  21  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/emprLBE?editors=0100) |
|  22  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/pvjQZxL) |
|  23  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/azvXNEB?editors=1100) |
|  24  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/NPxWpME) |
|  25  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/wBMMxyZ) |
|  26  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/OPNebGM?editors=1100) |
<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->