前端动画js实现
前端动画的 JavaScript 实现方法
使用 CSS 过渡（CSS Transitions）
通过修改元素的 CSS 属性，结合 transition 属性实现平滑动画效果。适合简单的属性变化（如颜色、大小、位置）。
const box = document.getElementById('box');
box.style.transition = 'all 0.3s ease';
box.style.backgroundColor = 'red'; // 触发过渡动画使用 CSS 动画（CSS Animations）
通过 @keyframes 定义动画序列，通过 JavaScript 动态添加或移除类名触发动画。
/* CSS */
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slide-animation { animation: slide 0.5s forwards; }const element = document.getElementById('element');
element.classList.add('slide-animation');使用 requestAnimationFrame
手动控制动画帧，适合需要精细控制的复杂动画。性能优于 setTimeout 或 setInterval。
let start = null;
function animate(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const element = document.getElementById('animated');
element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);使用 Web Animations API
现代浏览器原生支持的动画 API，可直接通过 JavaScript 控制关键帧和时间轴。
const element = document.getElementById('element');
element.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' }
], {
duration: 1000,
easing: 'ease-in-out'
});使用第三方库（如 GSAP、Anime.js）
对于复杂动画场景，可使用专业动画库简化实现：
GSAP 示例：
gsap.to("#box", {
x: 100,
duration: 1,
rotation: 360,
ease: "bounce.out"
});Anime.js 示例：
anime({
targets: '#box',
translateX: 100,
rotate: '1turn',
duration: 1000
});性能优化建议
- 优先使用
transform和opacity属性，它们不会触发重排（reflow）。 - 避免在动画中频繁修改
width、height或margin等布局属性。 - 使用
will-change提示浏览器提前优化：.animated-element { will-change: transform, opacity; }
浏览器兼容性处理
- 对于旧版浏览器，使用
@supports检测特性支持：@supports (animation: slide 1s) { /* 支持 CSS Animation 的样式 */ } - 考虑添加
-webkit-等前缀以确保兼容性。
