6. 作業
作業說明
指定檔名：css_animation.html
提供以下初始狀態的原始碼，再按照以下指示完成此作業(只需要撰寫 @keyframes 與 animation 相關 CSS 即可)：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
}
div.status{
position: fixed;
top: 0;
left: 0;
color: blue;
}
div.ball{
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
top: 100px;
background: radial-gradient(circle at 25px 25px, hsla(9, 100%, 84%, 1), hsla(9, 100%, 44%, 1));
}
div.ball.-pause{
}
</style>
</head>
<body>
<div class="status"></div>
<div class="ball"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
// 相關事件觸發
$("div.ball").on("animationstart", function(){ // 需有 延遲(animation-delay) 才會觸發
$("div.status").html("動畫：開始");
});
$("div.ball").on("animationiteration", function(){ // 反覆執行時，會觸發
$("div.status").html("動畫：第二次執行(反向)");
});
$("div.ball").on("animationend", function(){ // 動畫效果結束時，會觸發
$("div.status").html("動畫：結束");
});
// 點擊暫停
$("div.ball").on("click", function(){
$(this).toggleClass("-pause");
});
});
</script>
</body>
</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)
結果示意：
參考作法
https://alldata.sgp1.digitaloceanspaces.com/sample/css_animation_homework.zip
作業繳交方式
(TFD104 優先使用)：Tibame 平台
繳交期限 10/12(二)
Last updated