参考答案
结论：前端实现动画主要有CSS动画、JavaScript动画、SVG/SMIL动画、Web Animations API、Canvas/WebGL动画五种方式。核心要点：1.CSS动画通过@keyframes定义和animation或transition属性实现，由合成线程处理性能最佳；2.JS动画利用requestAnimationFrame循环修改样式或定时器，灵活但需注意主线程阻塞；3.SVG动画基于XML描述矢量图形渐变；4.Web Animations API统一了JS控制动画的接口；5.Canvas适合逐帧粒子等复杂渲染。原理：浏览器渲染分布局、绘制、合成，优先使用transform/opacity触发GPU合成避免重排；示例：.box{transition:transform 1s;}或el.animate([{opacity:0},{opacity:1}],{duration:1000})。