js实现animation
使用 CSS @keyframes 和 JavaScript 触发动画
通过 CSS 定义动画关键帧，JavaScript 动态添加或移除类名触发动画：
/* CSS 定义动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate {
animation: fadeIn 1s ease-in-out;
}// JavaScript 触发动画
const element = document.getElementById('target');
element.classList.add('animate');
// 动画结束后移除类名（可选）
element.addEventListener('animationend', () => {
element.classList.remove('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('logo');
element.animate(
[
{ transform: 'rotate(0deg)', opacity: 1 },
{ transform: 'rotate(360deg)', opacity: 0.5 }
],
{
duration: 1000,
iterations: Infinity,
easing: 'ease-in-out'
}
);使用 GSAP 等动画库
专业动画库如 GSAP 提供更丰富的功能和跨浏览器兼容性：
// 需先引入 GSAP 库
gsap.to("#object", {
duration: 2,
x: 100,
rotation: 360,
ease: "bounce.out"
});处理动画性能优化
确保动画运行流畅的注意事项：
- 优先使用
transform和opacity属性，它们不会触发重排 - 避免在动画中修改
width、height、margin等会触发布局变化的属性 - 对需要频繁动画的元素应用
will-change: transform - 使用
requestAnimationFrame而非setTimeout或setInterval
