# CSS Animations 動畫

CSS animations 使 『CSS 樣式設定』可以進行轉變。在這種動畫的運作上，只需要定義兩個部份：
1. 動畫的最初及結尾
2. 動畫轉變的方式。

## 參考資料

- [w3schools CSS Animations](https://www.w3schools.com/css/css3_animations.asp)

@keyframes：放置動畫程式碼的地方。
animation：(依序寫入各個參數)
例如：animation: example 5s linear 2s infinite alternate;

animation:name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

animation-name：@keyframes的名稱。
animation-duration：動畫從開始到結束需要多少時間。
animation-timing-function：運動曲線函數，例如：ease、linear等。
animation-delay：動畫延遲多久才開始。
animation-iteration-count：動畫重覆次數，可設定無限次。
animation-direction：動畫進行的方向。
animation-fill-mode：動畫結束時停留的狀態，維持在初始或結束時等狀態。
animation-play-state：動畫撥放或暫停。

|屬性|說明|
|---|-|
|animation-name|動畫名稱|
|animation-duration|動畫持續時間，預設 0，單位 s 或 ms。|
|animation-delay|動畫延遲播放時間，預設 0，單位 s 或 ms。|
|animation-iteration-count|動畫播放次數，預設 1。<br>其他還有 infinite。|
|animation-timing-function|動畫加速度函式，預設 ease。<br>其他還有： linear、ease-in、ease-out、<br>ease-in-out、step-start、step-end、<br>steps(int,start/end)、cubic-bezier(n,n,n,n)。|
|animation-direction|動畫播放方向，預設 normal。<br>其他還有 reverse、alternate、alternate-reverse。|
|animation-fill-mode|動畫播放前後模式，預設 none。<br>其他還有 forwards、backwards、both。|
|animation-play-state|動畫播放或暫停狀態，預設 running。<br>其他還有 paused。|

<iframe height='265' scrolling='no' title='CSS Animations (1)' src='//codepen.io/shinjia/embed/preview/ZjjRgz/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/shinjia/pen/ZjjRgz/'>CSS Animations (1)</a> by Shinjia (<a href='https://codepen.io/shinjia'>@shinjia</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## CSS Animations (2)

<iframe height='265' scrolling='no' title='CSS Animation (1)' src='//codepen.io/shinjia/embed/preview/71ef53a12fae4fff9b71fcd5751f983f/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/shinjia/pen/71ef53a12fae4fff9b71fcd5751f983f/'>CSS Animation (1)</a> by Shinjia (<a href='https://codepen.io/shinjia'>@shinjia</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 參考範例

- 取代 jQuery 的照片自動滑動特效
<iframe height="265" style="width: 100%;" scrolling="no" title="Responsive CSS Image Slider" src="https://codepen.io/dudleystorey/embed/ehKpi?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/dudleystorey/pen/ehKpi'>Responsive CSS Image Slider</a> by Dudley Storey
(<a href='https://codepen.io/dudleystorey'>@dudleystorey</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Q: 動畫可以串接嗎？

可以！
- Demo1: https://codepen.io/shinjia/pen/MWVQKxy
- Demo2: https://codepen.io/shinjia/pen/qBoxZWx