<div>標簽是HTML中用來定義一個區域或者一個容器的元素。通過使用CSS樣式選擇器，我們可以為<div>添加一些動畫效果。本文將通過幾個代碼案例詳細說明如何使用<div>觸發動畫效果。
，我們來看一個簡單的例子。以下代碼將顯示一個按鈕，當鼠標懸停在按鈕上時，按鈕的背景顏色將從紅色漸變到藍色：

鼠標懸停按鈕查看動畫效果：

<style>
.button {
width: 100px;
height: 50px;
background-color: red;
transition: background-color 0.5s;
}
.button:hover {
background-color: blue;
}
</style>
<br>
  <div class="button">
按鈕
</div>

解釋：，我們定義一個名為"button"的CSS類，并且為它添加一些樣式屬性。其中，transition屬性指定了動畫效果的持續時間為0.5秒。當鼠標懸停在按鈕上時，我們使用:hover偽類為按鈕添加了一個新的樣式，即將背景顏色改變為藍色。這樣，當鼠標懸停在按鈕上時，按鈕的背景顏色將漸變為藍色，從而實現了動畫效果。
接下來，我們來看一個更復雜一點的例子。以下代碼將顯示一個旋轉的正方形，當鼠標懸停在正方形上時，正方形會旋轉一定角度：

鼠標懸停正方形查看動畫效果：

<style>
.square {
width: 200px;
height: 200px;
background-color: red;
transition: transform 1s;
}
.square:hover {
transform: rotate(45deg);
}
</style>
<br>
  <div class="square"></div>

解釋：同樣地，我們定義了一個名為"square"的CSS類，為它添加了一些樣式屬性。其中，transform屬性指定了動畫效果的持續時間為1秒。當鼠標懸停在正方形上時，我們使用:hover偽類為正方形添加了一個新的樣式，即將其旋轉45度。這樣，當鼠標懸停在正方形上時，正方形將順時針旋轉45度，實現了動畫效果。
除了簡單的動畫效果外，我們還可以結合JavaScript來創建一些更為復雜的動畫。以下代碼將顯示一個正方形，當點擊正方形時，它將藍色和紅色之間來回切換：

點擊正方形查看動畫效果：

<style>
.square {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 1s;
}
.square.active {
background-color: red;
}
</style>
<br>
  <script>
document.querySelector('.square').addEventListener('click', function() {
this.classList.toggle('active');
});
</script>
<br>
  <div class="square"></div>

解釋：在這個例子中，我們定義了一個名為"square"的CSS類，并為它添加了一些樣式屬性。當點擊正方形時，我們使用JavaScript代碼通過classList.toggle方法為正方形切換一個名為"active"的CSS類，從而改變了正方形的背景顏色。這樣，每次點擊正方形時，它的背景顏色將在藍色和紅色之間來回切換，實現了動畫效果。
通過以上幾個代碼案例，我們可以看到如何使用<div>觸發動畫效果。無論是簡單的顏色漸變、旋轉效果，還是復雜的狀態切換動畫，都可以通過合理運用CSS樣式選擇器和JavaScript來實現。希望本文能為大家對<div>觸發動畫的探索與實踐提供一些指引。