HTML動畫的魅力在于它能夠為網站帶來更多的生命力和視覺上的吸引力，同時也能對用戶進行更好的引導。為了制作漂亮的HTML動畫，我們需要熟悉CSS和JavaScript的代碼，下面是一些代碼示例：

/* 添加CSS動畫效果 */
@keyframes shake {
0% { transform: translate(0,0) rotate(0deg); }
20% { transform: translate(-10px,0) rotate(-5deg); }
30% { transform: translate(10px,0) rotate(5deg); }
50% { transform: translate(-10px,0) rotate(-5deg); }
60% { transform: translate(10px,0) rotate(5deg); }
100% { transform: translate(0,0) rotate(0deg); }
}
/* 應用CSS動畫 */
.element {
animation: shake 1s ease-in-out;
}

上述代碼使用了CSS動畫和transform屬性，通過控制元素位置和旋轉達到震動的效果。注意，在使用CSS動畫時需要注意瀏覽器的兼容性。

/* 添加JavaScript動畫效果 */
let element = document.querySelector('.element');
let x = 0;
let id = setInterval(frame, 10);
function frame() {
if (x == 350) {
clearInterval(id);
} else {
x++;
element.style.left = x + 'px';
}
}

這段JavaScript代碼會使元素向右移動，通過間斷調用frame函數來達到動畫效果。這個例子較為簡單，但通過類似的原理可以實現更加復雜的動畫。

需要注意的是，HTML動畫雖然有著很好的效果，但不適應于所有場景。過多無規律的動畫效果會影響用戶的使用感受，還可能導致網頁加載速度變慢。正確地運用HTML動畫，才能更好地提高用戶體驗。