CSS連幀動畫是一種通過CSS來實現的基于幀的動畫效果，其實現原理是通過將固定的圖片序列按照一定速率連續播放，從而呈現出生動的動畫效果。

以下是一個簡單的CSS連幀動畫示例：

.animated {
background: url("sprite.png") no-repeat;
width: 100px;
height: 100px;
animation: play 1s steps(3) infinite;
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -300px;
}
}

上述代碼中，我們通過設置動畫關鍵幀來控制圖片序列的播放速度和順序，從而達到連幀動畫的效果。其中，steps()函數用來指定關鍵幀之間的過渡方式，infinite則表示循環播放。

對于CSS連幀動畫的優化，我們可以采用以下幾點：

• 盡量減少圖片序列的幀數，以便提高頁面性能。
• 對于大型圖片序列，可以使用雪碧圖技術來減小HTTP請求數量。
• 對于需要多次播放的動畫，可以使用CSS動畫的緩存機制來提高性能。

總之，CSS連幀動畫是一種簡單而有效的動畫實現方式，通過合理的優化可以為網站帶來更好的用戶體驗和更高的性能表現。