在網站制作中，我們常常需要使用各種動畫效果來提高用戶體驗。其中，使用 CSS、JS 和圖片來制作動畫效果是較為常用的方法。

一、CSS 動畫

/* 使用 keyframes 定義動畫 */
@keyframes shake {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(10px);
}
}
/* 應用動畫效果 */
div {
animation: shake 0.5s infinite;
}

通過使用@keyframes關鍵字，我們可以定義一些關鍵幀的樣式，以達到想要的動畫效果。并通過animation屬性將定義好的動畫效果應用到元素上。

二、JS 動畫

/* 使用 JS 實現移動動畫 */
const box = document.querySelector('.box');
let pos = 0;
function move() { 
box.style.left = pos + 'px';
pos += 2;
if (pos< 100) {
requestAnimationFrame(move);
}
}
move();

通過使用 JS 的 DOM 操作，我們可以動態地改變元素的位置、大小、樣式等屬性，以達到各種動畫效果。上述代碼中，我們通過不斷改變元素的 left 值，實現了一個簡單的移動動畫。

三、圖片動畫

/* 幀動畫 */
img {
width: 100px;
height: 100px;
animation: playerFrames 0.5s steps(4) infinite;
background: url('player.png') no-repeat;
}
@keyframes playerFrames {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}

在制作游戲、主題站等方面，我們常常需要使用幀動畫來制作人物移動等效果。通過 CSS 的background-position屬性，我們可以輕松地將不同的圖片拼接成一個動畫幀序列，并使用steps函數指定幀數，實現幀動畫效果。