每次看到別人的網站有動態，總覺得好厲害！
是真的會～哇！！！！
（好厲害！！！）
直到最近把靜態頁切完後，
還是很想讓網站畫面能有 "動態效果"
才發現原來........根本不難嘛！！！！＠＠
今天就來整理＆來分享
很多年前就知道 [ Animate.css ] CSS動態，只要加入這個css就可以讓自己的畫面有動畫啦！
最起初我也只會呆呆的用，來增加一些效果～ 也就滑入、滑出、淡入、淡出..
套用方法：
// 放置HTML <head> 內
<link rel="stylesheet" type="text/css" href="animate.css">
// class="animated XXXXX" 第一個"animated"，第二個是依你想要的效果動態名稱
<body>
<div id="frog" class="animated bounceInDown"></div>
</body>
效果如下圖：
<style>
#frog{
width:46px;
height:45px;
animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/
}
</style>
加上CSS動畫屬性設定，整個網頁動態就更完美了！
（參考：W3C、MDN CSS動畫 ）
屬性列表：
| 屬性 | 說明 |
|---|---|
| animation-name | 動畫名稱 |
| animation-duration | 動畫持續時間，預設 0，單位 s 或 ms。 |
| animation-delay | 動畫延遲播放時間，預設 0，單位 s 或 ms。 |
| animation-iteration-count | 動畫播放次數，預設 1。其他還有 infinite... |
| animation-timing-function | 動畫加速度函式，預設 ease。其他還有： linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。 |
| animation-direction | 動畫播放方向，預設 normal。其他還有 reverse、alternate、alternate-reverse。 |
| animation-fill-mode | 動畫播放前後模式，預設 none。其他還有 forwards、backwards、both。 |
| animation-play-state | 動畫播放或暫停狀態，預設 running。其他還有 paused。 |
滾軸觸發效果的動畫
滾軸觸發效果的動畫應該是網頁動畫中最基本的需求，但我從沒研究過～
因為之前總覺得應該不簡單，但我說好要認真、?發向上的學習前端的！
加上我也好想要讓網頁有動態喔～
也就認真的亂胡下關鍵字在網路上搜尋。結果看到一篇文章在寫AOS.js，還真的超簡單套用的！
// CSS放置HTML <head> 內
<link href="../dist/aos.css" rel="stylesheet">
// JS放置 </body> 結束標籤前加入以下二筆資料，一個連結JS檔，一個是設定
<script src="../dist/aos.js"></script>
// AOS.init(); 是什麼都不設定也要加入的！才會有作用喔！
<script>
AOS.init();
</script>
使用Animate
1.我會考量到，同一畫面沒有太多物件交換做效果 ，不然要單一單一調整視覺時間，就要調上很久很久～
2. 無需scroll觸發才做的動態! 但若是需要的話，可以加入自己寫的JQ做搭配，但本人還不太會 T"T使用AOS.js
是我第一次使用的！滾輪滾回去的時候他會回到起始點當滾輪在滾下來時重複播放動畫，這樣子的功能讓我覺得蠻喜歡的。（不會寫 JS 時有這樣的資料庫就很好用XD）
而且效果一加入簡值將自己提升了好幾十分！
突然覺得離前端工程師這專業名稱不遠了 XD (即使是自我開心也好 )
iThome鐵人賽
看影片追技術