CSS3动画和JS动画是现代前端开发中非常常见的两种动画效果。它们的原理、实现方式和使用场景都有所不同。下面我们将逐一讲解它们的优缺点和应用。

首先，CSS3动画是利用CSS3中的transitions和animations属性来实现的。这种动画效果优点在于：实现方式简单，代码容易维护，能够通过CSS的伪类来实现交互效果。缺点在于：对于复杂的动画效果能力不足，需要使用较多的CSS属性来实现；不支持精细控制动画的进度和状态。

.box{
width: 100px;
height: 100px;
background-color: #f00;
animation: move 2s infinite alternate;
}
@keyframes move{
from{
transform: translateX(0);
}
to{
transform: translateX(200px);
}
}

接下来是JS动画。它的原理是通过JavaScript来控制页面中元素的属性值的变化，进而实现动画效果。这种动画优点在于：能够实现更为复杂的动画效果，控制精度高，可精细控制动画的进度和状态。缺点在于：代码复杂度较高，容易出现性能问题。

let box = document.querySelector('.box');
let btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
let pos = 0;
let timer = setInterval(function(){
box.style.transform = 'translateX(' + pos + 'px)';
pos += 10;
if(pos >200){
clearInterval(timer);
}
}, 20);
});

总的来说，CSS3动画适用于简单的动画效果，而JS动画适用于复杂的动画效果。在实际开发中，往往需要根据具体的需求选择不同的动画方式来实现。