CSS 帶聲音的動畫是一種非常有趣且能夠吸引用戶注意力的效果。通過CSS 的 @keyframes 和 audio 標簽，我們可以輕松地實現這種效果。

@keyframes myAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
audio {
display: none;
}
.myElement:hover {
animation: myAnimation 1s forwards;
}
.myElement:hover + audio {
display: block;
}

首先，我們需要創建一個 keyframes，定義動畫的效果。在這個例子中，我們將元素從原來的大小放大到兩倍。我們將這個 keyframes 命名為 myAnimation。

接下來，我們使用 audio 標簽來嵌入聲音文件，比如說一段音頻文件或音樂。

然后，我們將 audio 標簽的 display 屬性設置為 none，這樣在頁面中就不會看到它。在 CSS 中使用 :hover 偽類監聽鼠標懸浮在元素上的事件。當鼠標懸浮在元素上時，我們將元素應用我們之前定義的 myAnimation 動畫，并使用 forwards 屬性保持動畫完成后的狀態。同時，我們將之后的兄弟元素（也就是 audio 標簽）的 display 屬性設置為 block，這樣它就會顯示出來，并且播放聲音。

有了這些知識，我們就可以輕松地為我們的網站添加 CSS 帶聲音的動畫效果了！