CSS與JS動畫的性能一直是前端開發者關注的話題之一。在設計動畫時，需要考慮優雅降級、漸進增強以及性能優化等方面。下面就分別闡述CSS與JS動畫的性能及優化方法。

CSS動畫性能

.box{
transition: all 0.3s ease;
}
.box:hover{
transform: scale(1.1);
}

CSS動畫通常使用transition、transform和animation屬性，這些屬性不會阻塞主線程，因此不會影響頁面的響應速度。另外，CSS動畫支持GPU加速，在一些性能較好的設備上，性能表現較佳。但是在一些較舊的設備上，CSS動畫可能會出現卡頓或者閃爍現象。

如果需要優化CSS動畫性能，可以考慮減少動畫元素的數量、使用緩存技術、避免使用太多的過渡、避免動畫循環等。

JS動畫性能

function move(){
var ele = document.getElementById("box");
var pos = 0;
var id = setInterval(frame, 5);
function frame(){
if(pos == 350){
clearInterval(id);
}else{
pos ++;
ele.style.top = pos + "px";
ele.style.left = pos + "px";
}
}
}

JS動畫通常使用requestAnimationFrame方法、setTimeout或setInterval方法來實現。這些方法會阻塞主線程，有可能造成卡頓現象。此外，JS動畫沒有GPU加速，因此在一些設備上性能表現不佳。

為了優化JS動畫性能，可以考慮使用transform屬性以替代top和left屬性，減少多余的DOM操作、避免頻繁的重繪和回流、使用硬件加速等。

綜上所述，CSS動畫在一些性能較好的設備上表現較佳，而JS動畫在一些設備上可能出現卡頓現象。因此，在設計動畫時，應根據實際情況選擇合適的動畫方式，盡可能地減少性能瓶頸。