用js实现css动画
使用JavaScript实现CSS动画
JavaScript可以通过直接操作DOM元素的样式或使用CSS类来实现动画效果。以下是几种常见方法：
直接操作style属性
通过修改元素的style属性实现基础动画：
const box = document.getElementById('box');
let position = 0;
function animate() {
position += 1;
box.style.left = position + 'px';
if (position < 200) {
requestAnimationFrame(animate);
}
}
animate();使用classList切换CSS类
定义CSS动画关键帧，通过JavaScript切换类名触发：
/* CSS部分 */
.box {
transition: all 0.5s ease;
}
.box.active {
transform: translateX(200px);
background-color: red;
}const box = document.getElementById('box');
box.classList.add('active');使用Web Animations API
现代浏览器支持的原生动画API：
const box = document.getElementById('box');
box.animate([
{ transform: 'translateX(0)', opacity: 1 },
{ transform: 'translateX(200px)', opacity: 0.5 }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternate'
});结合CSS变量实现动态动画
通过JavaScript更新CSS变量值：
.box {
--x-pos: 0;
transform: translateX(var(--x-pos));
transition: transform 0.3s ease;
}const box = document.getElementById('box');
box.style.setProperty('--x-pos', '200px');性能优化建议
优先使用transform和opacity属性实现动画，这些属性不会触发重排。使用requestAnimationFrame代替setTimeout实现JavaScript动画，确保动画与浏览器刷新率同步。
对于复杂动画序列，可以考虑使用专门的动画库如GSAP或Anime.js，这些库提供更强大的时间轴控制和跨浏览器兼容性。
