# 🏅 Day 42 - 練習 keyframes

### 題目

只需要更改 CSS 內的「`...`」並替換成程式碼
目標：使用 left 和 top 屬性讓 .box 可以**分成四個階段逆時針沿著 .wrapper 移動** (需透過 Codepen 繳交結果)

HTML

<div class="wrapper">
  <div class="box"></div>
</div>

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://codepen.io/hexschool/pen/JjLaZZY
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/oNrEJBa?editors=1100) |
| 02 | yoishere | [Codepen](https://codepen.io/yoishere/pen/jOjZXmV) |
| 03 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/dyBdwaB) |
| 04 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB) |
| 05 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNrEmXv?editors=1100) |
|06| Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/bGPLzWY?editors=1100)|
| 07 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/ZEdrwvw) |
| 08 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/oNrEObM)|
| 09 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RwzQmvV)|
| 10 | KUN | [Codepen](https://codepen.io/barry91205/pen/JjQpgGL) |
| 11 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/gONeOgz?editors=1100) |
| 12 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/YzoaPLb) |
| 13 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/MWMVbWV?editors=1100) |
| 14 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/LYKdWKa) |
| 15 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/gONeGar) |
| 16 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/mdZLbNW?editors=1100) |
| 17 | wind | [Codepen](https://codepen.io/wind7y/pen/JjQvWPN) |
| 18 | Glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/NWZMMzP)|
| 19 | kawa | [Codepen](https://codepen.io/z83xji6/pen/PoreBVa) |
| 20 | Mike | [Codepen](https://codepen.io/mike2049/pen/yLdEbLg?editors=0100) |
| 21 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/wvLXQzq) |
| 22 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/gONjpdb) |
| 22 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/dyBjXwX) |
| 23 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/xxoJWVM) |
| 24 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/eYwoqYp) |
| 25 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/LYKwPOr) |
| 26 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/RwXwNrr) |
| 27 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/JojVOrE?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->