指定檔名:css_animation.html
提供以下初始狀態的原始碼,再按照以下指示完成此作業(只需要撰寫 @keyframes
與 animation
相關 CSS 即可):
@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(二)