---
# System prepended metadata

title: "\U0001F3C5 Day 36 - aos + animate"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 36 - aos + animate

aos 與 animate 都是用於處理網頁動畫的函式庫，提供許多類型的動畫效果讓我們使用。
aos 擅長處理元素「滾動到特定區塊時觸發」的動畫，而 animate.css 則提供多種「預設的單次動畫效果」。

### 使用方式
載入 CDN
CSS：
* https://unpkg.com/aos@2.3.1/dist/aos.css
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css 

JS：
* https://unpkg.com/aos@2.3.1/dist/aos.js

AOS 初始化
```javascript=
 AOS.init();
```

### 題目

嘗試使用 [animate.css](https://animate.style/) 結合 [AOS](https://michalsnik.github.io/aos/) 做出動畫效果
使用語法、畫面不限


## 回報流程

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

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

<!-- 解答：https://codepen.io/fhljksmg-the-styleful/pen/empNwpa
-->




回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/YPyZoXQ)|
| 02 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/wBKJLpN) |
| 03 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/RNWpzPL) |
| 04 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/YPyZoae?editors=1100) |
| 05 | Pastor  |[Codepen](https://codepen.io/peter_hung/pen/EaVWqaw) | 
|  06  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/VYvbZaY) |
|  07  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/YPyZmmK?editors=1100) |
|  08  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/PwPmYLO) |
|  09  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/ogjWvxv) |
|  10  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/dPYWPbK) |
|  11  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/XJmRbdy) |
|  12  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/wBKdKYO) |
|  13  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/bNVWENb) | 
|  14  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/ByoRjQB) | 
|  15  |  Joguman  |[Codepen](https://codepen.io/abiscc14/pen/wBKdWPQ) | 
|  16  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYamjjb) |
|  17  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/JoYJGga) |
|  18  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=yyYXKqW) |
|  19  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/xbwrjZd) |
|  20  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/yyYoVEP) |
|  21  |  伊迪  |[Codepen]([連結](https://codepen.io/eku10rei/pen/PwPeNxQ?editors=1100)) |
|  22  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/raOqrjZ) |
|  23  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/empQjBV) 
|  24  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/PwPVNjB) |
|  25  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/vELLaEW) |
|  26  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/yyOdVPg) |

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->