# Alert Animation

`alert-animation` 是 daisyUI 5 Alert 的移動斜紋擴充類別。它只增加視覺動態，不改變 Alert 的語意顏色、樣式或排列。

## 使用方式

```html
<div role="status" class="alert alert-info alert-animation">
   <span>系統正在同步資料。</span>
</div>
```

它可以搭配以下 daisyUI 類別：

- 顏色：`alert-info`、`alert-success`、`alert-warning`、`alert-error`
- 樣式：`alert-soft`、`alert-outline`、`alert-dash`
- 方向：`alert-vertical`、`alert-horizontal`，以及響應式方向類別

`alert-soft`、`alert-outline` 和 `alert-dash` 會移除 Alert 本身的背景圖片。`alert-animation` 將斜紋放在獨立的偽元素層，所以不會覆蓋這些樣式或 daisyUI 的背景效果。

## CSS 變數

| 變數 | 預設值 | 用途 |
| --- | --- | --- |
| `--uic-alert-animation-color` | `currentColor` | 斜紋顏色 |
| `--uic-alert-animation-opacity` | `0.06` | 斜紋透明度 |
| `--uic-alert-animation-size` | `2.5rem` | 斜紋尺寸與移動距離 |
| `--uic-alert-animation-speed` | `2s` | 單次循環時間 |

soft、outline、dash 樣式的預設透明度會降低為 `0.04`。可以直接在元件或主題層覆寫變數：

```html
<div
   role="status"
   class="alert alert-info alert-outline alert-animation"
   style="--uic-alert-animation-size: 1.5rem; --uic-alert-animation-speed: 3.5s;"
>
   <span>正在處理資料。</span>
</div>
```

## 動態與無障礙

- 動畫適合表示處理中、等待更新或短暫需要注意的狀態，不建議讓一般靜態通知永久移動。
- 使用者設定 `prefers-reduced-motion: reduce` 時，斜紋會保留但停止移動。
- 列印及 forced colors 模式會隱藏裝飾斜紋。
- 緊急訊息使用 `role="alert"`；一般狀態更新使用 `role="status"`。
- 圖示應使用 `aria-hidden="true"`，並由訊息文字提供完整語意。