---
# System prepended metadata

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

---

### 題目

只需要更改 CSS 內的「`...`」並替換成程式碼
目標：使用 left 和 top 屬性讓 .box 可以**分成四個階段逆時針沿著 .wrapper 移動** (需透過 Codepen 繳交結果)
 
HTML
```htmlembedded=
<div class="wrapper">
  <div class="box"></div>
</div>
```
CSS
```css=
@keyframes example{
  ...
}

.box{
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite; 
  animation-fill-mode: both; 
}
.wrapper{
  width: 300px;
  height: 300px;
  border:1px solid black;
}
```



## 回報流程

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

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

<!-- 解答：
https://codepen.io/hexschool/pen/JjLaZZY
 -->




回報區
---


| no  | Discord  |                           CodePen / 答案                           |
|:---:|:--------:|:------------------------------------------------------------------:|
|  1  |  銀光菇  |      [Codepen](https://codepen.io/genesynthesis/pen/NWePBYJ)       |
|  2  |    Yu    | [Codepen](https://codepen.io/yuch3n_chen/pen/MWZYBqw?editors=1100) |
|  3  | Ann Chou |       [Codepen](https://codepen.io/annchou_illu/pen/LYMEBXz)       |
|  4  |   Tami   |    [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/poqvZxo)     |
| 5 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/RwENBvJ?editors=1100) |
| 6 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/poqvZOo) |
| 7 | Hana | [Codepen](https://codepen.io/hananalin/pen/GRPgBBB) |
| 8 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/rNoarEW)
| 9 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/rNoarRM) |
| 10 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/JjwoBQr) |
| 11 | Uli | [Codepen](https://codepen.io/uli1313/pen/NWePLKQ) |
| 12 | rjjq | [Codepen](https://codepen.io/rjjq/pen/BavyONe) |
| 13 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/xxmbabX) |
| 14 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/poqvOEb) |
| 15 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/WNLbgpQ) |
| 16 | townyuan | [Codepen](https://codepen.io/townyuan/pen/XWoJPge) |
| 17 | Moreene |[CodePen](https://codepen.io/Moreene/pen/gOZbdjY)|
| 18 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/YzdPOLg) |
| 19 | Eden |[Codepen](https://codepen.io/iseden/pen/MWZYqqv)|
| 20 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/ExGaeqe?editors=1100) |
| 21 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/wvRBYdd) |
| 22 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/qBLEJzO?editors=1100) |
| 23 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/GRPgwNy) |
| 24 | SmallP | [Codepen](https://codepen.io/smallp/pen/XWoJPee) |
| 25 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/BavyGyr) |
| 26 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/vYvEvmv) |
| 27 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/poqvGzW) |
| 28 | Paul#7426| [Codepen](https://codepen.io/paul-1997/pen/xxmbBRV?editors=0100)|
| 29 | yunhsinnnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/ZEVYZgv) |
| 30 | shcopy | [Codepen](https://codepen.io/shcopy/pen/oNJgrbz) |
| 31 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/xxmbvVX?editors=1100) |
| 32 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/oNJXNNx) |
| 33 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/WNLvNOY?editors=1100) |
| 34 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/poqJoGo) |
| 35 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/RwEPrXX) |
| 36 | orias_000 | [Codepen](https://codepen.io/qoq77416416/pen/eYbNzEO?editors=1100) |
| 37 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/MWZweqW) |
| 38 | m_m | [Codepen](https://codepen.io/minnn7716/pen/bGOdeJZ) |
| 39 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/vYvOXNa?editors=1100) |
| 40 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/xxmGgOG) |
| 41 | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/VwqLPzb)|
| 42 | shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/poqJpGR?editors=1100)|
| 43 | jacky7035 | [CodePen](https://codepen.io/adens123/pen/XWobymw)|
| 44 | Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/LYMVva)|
| 45 | runweiting | [Codepen](https://codepen.io/weiting14/pen/xxmwdMB) |
| 46 | wind | [Codepen](https://codepen.io/wind7y/pen/QWzjMER) |
| 47 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/jOXbQGp) |
| 48 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/qBLOvGN) |
| 49 | cura | [Codepen](https://codepen.io/curalin/pen/jOXWOBz?editors=1100) |
| 50 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/oNJbepe) |
| 51 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/OJrMjdd) |
| 52 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/abPdMqr) | 
| 53 | .icesam | [Codepen](https://codepen.io/icesam/pen/GRPoaBV) | 
| 54 | Randy | [Codepen](https://codepen.io/landy510/pen/ExGNwmj?editors=0100) | 
| 55 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/gOZgbVg?editors=1100) |
| 56 |RX00#5351  | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/QWzdxKm) |
| 57 |Long  | [Codepen](https://codepen.io/Loonng/pen/MWZppLr?editors=1100) |
| 58 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/RwEpBrZ) |
| 59 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/MWZEQjy) |
|  60| patrickpie| [Codepen](https://codepen.io/patrickpie/pen/JjwLzMy?editors=1100) |


* 快速複製
```
|  |  | [Codepen]() |
```