js实现动画
使用 CSS 动画与 JavaScript 控制
通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧（@keyframes），JavaScript 通过 classList 控制动画状态。
/* CSS 定义 */
.animate {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}// JavaScript 触发
const element = document.getElementById('target');
element.classList.add('animate');使用 requestAnimationFrame
手动控制每一帧的渲染，适合复杂动画逻辑。通过递归调用实现连续动画。
function animate(element, duration) {
const start = performance.now();
function update(time) {
const elapsed = time - start;
const progress = Math.min(elapsed / duration, 1);
element.style.transform = `translateX(${progress * 200}px)`;
if (progress < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
animate(document.getElementById('box'), 1000);使用 Web Animations API
原生支持的动画 API，可直接操作动画属性和时间。
const element = document.getElementById('target');
element.animate(
[
{ opacity: 0, transform: 'translateY(-20px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{
duration: 1000,
easing: 'ease-out'
}
);使用第三方库（如 GSAP）
GSAP 提供更强大的时间轴控制和复杂动画序列。
gsap.to("#target", {
x: 100,
duration: 1,
rotation: 360,
ease: "bounce.out"
});性能优化建议
避免频繁触发重排和重绘。使用 transform 和 opacity 属性（硬件加速），减少动画元素的数量，必要时使用 will-change 提示浏览器。
.target {
will-change: transform, opacity;
}
