鼠標懸停觸發css3動畫是一種常見的網頁交互效果。這種效果能夠為網頁增加一些生動而且有趣的元素，讓用戶對網站充滿興趣。下面我們來介紹如何實現鼠標懸停觸發css3動畫。

/* css代碼 */
.box {
width: 200px;
height: 200px;
background-color: #f00;
transition: all 0.5s ease;
}
.box:hover {
width: 300px;
height: 300px;
}

首先，我們需要使用CSS3的transition屬性來定義我們想要做動畫的CSS屬性。在上面的代碼中，我們定義了版塊(box)的寬度和高度。然后我們使用transition屬性，告訴瀏覽器這些屬性應該轉換動畫效果。我們在這個例子中使用ease動畫緩慢效果，但是你也可以使用別的動畫效果。

接下來，我們使用:hover偽類來設置鼠標懸停時的CSS屬性。在上面的例子中，我們設置了.box:hover的寬度和高度比.box的原始尺寸大100像素。當用戶將鼠標移到版塊上時，它將變成一個大一點的方塊。這是一個簡單但非常有效的效果。

除此之外，我們還可以在 :hover偽類的下面添加transform屬性來創建更復雜的動畫效果。例如，我們可以通過旋轉、移動或者縮放來創建更加有趣的效果。例如：

.box {
width: 200px;
height: 200px;
background-color: #f00;
transition: all 0.5s ease;
}
.box:hover {
transform: rotate(360deg);
}

在這個例子中，版塊將會在懸停時快速的旋轉360度。這個效果看起來非常酷，但也說明了我們可以在:hover偽類下面添加更復雜的動畫效果。

總之，鼠標懸停觸發css3動畫是一個非常實用的交互元素，可以增加網頁的趣味性和吸引力。這個效果可以用簡單的CSS代碼來完成，在沒有使用javascript的情況下，可以節省開發時間和資源。