🖍️
CSS 排版及動畫效果
  • CSS 排版及動畫效果
  • 1. 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
    • 1.3 開發工具簡介
  • 2. 棋盤式排版模式 Grid
    • 2.1 基本觀念及術語
    • 2.2 Grid 排版 - Container
    • 2.3 Grid 排版 - Items
  • 3. 多欄排版模式 Column
  • 4. 轉場效果 transition
    • 4.1 第一個 transition
    • 4.2 屬性 transition-property
    • 4.3 期間 transition-duration
    • 4.4 漸變函式 transition-timing-function
    • 4.5 延遲 transition-delay
    • 4.6 transition 縮寫
    • 4.7 練習
  • 5. 動畫效果 animation
    • 5.1 第一個 animation
    • 5.2 關於 keyframes
    • 5.3 同個元素套用多個 animation
    • 5.4 次數 animation-iteration-count
    • 5.5 方向 animation-direction
    • 5.6 延遲 animation-delay
    • 5.7 填滿模式 animation-fill-mode
    • 5.8 播放狀態 animation-play-state
    • 5.9 漸變函式 animation-timing-function
    • 5.10 animation 縮寫
    • 5.11 補充:動畫效果事件(Animation Event)
    • 5.12 練習
  • 6. 作業
  • 7. 第三方動畫效果套件
    • 7.1 Animate.css
    • 7.2 AOS
    • 7.3 CSS Loader
  • 8. 大量練習
  • 9. 其它及參考資料
Powered by GitBook
On this page
  • 作業說明
  • 參考作法
  • 作業繳交方式

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 )

結果示意:

參考作法

作業繳交方式

(TFD104 優先使用):Tibame 平台

繳交期限 10/12(二)

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

Last updated 3 years ago

https://alldata.sgp1.digitaloceanspaces.com/sample/css_animation_homework.zip
https://frontend.tibame.com