# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/css-animation/dong-hua-xiao-guo-animation/5.12-lian-xi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.