> 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/dong-hua-xiao-guo-animation/5.12-lian-xi.md).

# 5.12 練習

## 練習 1： cubic-bezier

透過[這個網站](https://cubic-bezier.com/#.17,.67,.83,.67)，拉一個效果，如下結果示意。

指定檔名：`cubic_bezier.html`

提供 html：

```markup
<div class="outer_block">
  <div class="block">div 區塊</div>
</div>

<button type="button" class="trigger">觸發</button>
```

提供部份 css：

```css
* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
div.outer_block{
  width: 500px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
}
div.block{
  border: 1px solid blue;
  display: inline-block;
  width: 100px;
  height: 98px;
  position: absolute;
  left: 0;
  top: 0;
}
```

提供 js：

```markup
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
  
    // 「觸發」按鈕點擊
    $("button.trigger").on("click", function(){
      
      // move 樣式的切換(點擊一次加上 move 樣式，再點擊則移除)
      $("div.block").toggleClass("move");
      
    });
    
  });
</script>
```

結果示意：

{% embed url="<https://youtu.be/vGiScRqFwzo>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/wvBQgPd>" %}

## 練習 2：左右擺動

指定檔名：`button_wiggle.html`

@keyframes 說明：

* 動畫效果名稱為 `wiggle`
* 0% 時的位置： `left: 0;`
* 10% 時的位置： `left: -10px;`
* 20% 時的位置： `left: 0;`
* 30% 時的位置： `left: 10px;`
* 40% 時的位置： `left: 0;`
* 50% 時的位置： `left: -10px;`
* 60% 時的位置： `left: 0;`
* 70% 時的位置： `left: 10px;`
* 100% 時的位置： `left: 0;`

其它說明：

* 動畫效果執行一次( `animation-duration` )的時間為 1s
* 漸變函式( `animation-timing-function` )設定為 linear
* input.input\_text 元素的 position 設定為 relative

提供 html：

```markup
<div class="fixed_block">
  <input type="text" class="input_text" placeholder="text 欄位">

  <br>

  <button type="button" class="trigger">資料送出</button>
</div>
```

提供部份 css：

```css
* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
div.fixed_block{
  position: fixed;
  display: inline-block;
  border: 1px solid gray;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input.input_text{
  border: 1px solid red;
  position: relative;
}
```

提供 js(放在 `</body>` 結束標籤之前)：

```markup
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
    
    // 點擊(click)事件
    $("button.trigger").on("click", function(){
      
      // 加上指定的樣式
      $("input.input_text").addClass("-wiggle");
      
      // 經過指定毫秒後，移除 -wiggle 樣式
      setTimeout(function(){
        $("input.input_text").removeClass("-wiggle");
      }, 1000); // 單位是毫秒
      
    });
    
    
  });
</script>
```

結果示意：

{% embed url="<https://youtu.be/N7jBrnmeiks>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/wvBQodw>" %}

## 練習 3：Sprite 效果

指定檔名：`animation_sprite.html`

![](/files/-M7YDwyXPxz7qNmC9NT6)

圖片路徑：\
<https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png>

說明：

* 此圖的寬高分別是 `850px`、`170px`。
* `animation-timing-function` 使用 `steps` 函式。
* 執行方向：做一個寬高都是 170px 的 div，搭配 animation 動畫效果。

提供 html：

```markup
<!-- 用 CSS 背景圖 方式來做 -->
<div class="sprite_block"></div>

<!-- 或 用 img 標籤來做 -->
<div class="sprite_block"><img src="https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png"></div>
```

結果示意：

{% embed url="<https://youtu.be/ImkgOtm8diw>" %}

參考作法：

背景圖做法：

1、算出每跳一次，要多少百分比 → 25%。

2、steps 要 5 個間隔，就 25% \* 5 = 125%。

{% embed url="<https://codepen.io/carlos411/pen/pojxBMB>" %}

img 標籤做法：

{% embed url="<https://codepen.io/carlos411/pen/dyYgEYW>" %}