> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/css-animation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/css-animation/6.-zuo-ye.md).
# 6. 作業
## 作業說明
指定檔名：`css_animation.html`
提供以下初始狀態的原始碼，再按照以下指示完成此作業(只需要撰寫 `@keyframes` 與 `animation` 相關 CSS 即可)：
```html
```
@keyframes 說明：
* 需要撰寫兩個 @keyframes 動畫效果。第一個名稱為 `move_to_right`，第二個名稱為 `fade_out`。
* **move\_to\_right** 動畫效果(keyframes)說明 1：初始狀態( `0%` )旋轉 0 度( `transform` )，距離左側 100px( `left` )。
* **move\_to\_right** 動畫效果(keyframes)說明 2：在 `30%` 狀態的時候，旋轉到 360 度，距離左側 30% ( `left` )；此時 `animation-timing-function` 的部份，改成 `cubic-bezier(1,.06,.78,.81)`。
* **move\_to\_right** 動畫效果(keyframes)說明 3：在 `70%` 狀態的時候，旋轉到 720 度，距離左側 `calc(100% - 100px)`；此時 `animation-timing-function` 的部份，改成 `ease-out`。
* **move\_to\_right** 動畫效果(keyframes)說明 4：在 `100%` 狀態的時候，旋轉回到 360 度，距離左側 `calc(100% - 100px - 300px)`。\
以上完成了 **move\_to\_right** 動畫效果。
* **fade\_out** 動畫效果(keyframes)說明 1：在 `0%` 狀態的時候，不透明度( `opacity` )設定為 `1`。
* **fade\_out** 動畫效果(keyframes)說明 2：在 `100%` 狀態的時候，不透明度( `opacity` )設定為 `.1`。
套用動畫效果的說明：
* 針對 `div.ball` 套用以上所撰寫的兩個動畫效果，先套用 `move_to_right`，再套用 `fade_out`。( `animation-name` )
* 兩個動畫效果的執行期間，分別是 `10s` 與 `1s`。( `animation-duration` )
* 一開始的 `animation-timing-function`，分別是 `ease-out` 與 `linear`。( `animation-timing-function` )
* 填滿模式的部份，針對 **move\_to\_right** 設定動畫效果一開始要直接在 `0%` 的位置( `backwards` )，動畫效果執行完後，要停留在最後 `100%` 的位置( `forwards` )，兩者都套用可以直接使用 `both` ；而 **fade\_out** 的動畫效果，不需要特別設定( `none` )。( `animation-fill-mode` )
* 延遲的部份，針對 **move\_to\_right**，延遲 `1s`；針對 **fade\_out**，延遲 `22s`。( `animation-delay` )
* 動畫效果執行次數，**move\_to\_right** 與 **fade\_out** 都是各執行 2 次。
* 動畫效果執行方向，**move\_to\_right** 與 **fade\_out** 都是設定正向與反向交替執行( `alternate` )。( `animation-direction` )
其它說明：
* 點擊 `div.ball` 的時候，動畫效果暫停，如果再點擊，就恢復動畫效果。寫在 css 裡的 `div.ball.-pause` 這個選擇子。( `animation-play-state` )
結果示意：
{% embed url="" %}
###
### 參考作法
## 作業繳交方式
(TFD104 優先使用)：Tibame 平台
繳交期限 10/12(二)