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 平台

https://frontend.tibame.com

繳交期限 10/12(二)

Previous5.12 練習Next7. 第三方動畫效果套件

Last updated