js实现css3动画
使用 JavaScript 触发 CSS3 动画
通过 JavaScript 动态添加或移除 CSS 类来触发动画效果。CSS3 动画通过 @keyframes 定义，JavaScript 负责控制动画的启动或停止。
/* 定义动画关键帧 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 定义动画类 */
.animate-fadeIn {
animation: fadeIn 1s ease-in-out;
}// 获取目标元素
const element = document.getElementById('target');
// 添加动画类
element.classList.add('animate-fadeIn');
// 动画结束后移除类（可选）
element.addEventListener('animationend', () => {
element.classList.remove('animate-fadeIn');
});动态修改 CSS 属性
通过 JavaScript 直接修改元素的 style 属性实现动画效果，适用于需要动态参数的场景。
const element = document.getElementById('target');
// 设置初始状态
element.style.transition = 'all 1s ease-in-out';
element.style.opacity = '0';
// 触发动画
setTimeout(() => {
element.style.opacity = '1';
}, 100);使用 requestAnimationFrame 实现高性能动画
通过逐帧控制实现复杂动画，适合需要精细控制的场景。
const element = document.getElementById('target');
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const progress = timestamp - startTime;
const opacity = Math.min(progress / 1000, 1); // 1秒内从0到1
element.style.opacity = opacity;
if (progress < 1000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);监听动画事件
通过 JavaScript 监听动画的开始、结束或迭代事件，实现更复杂的交互逻辑。
const element = document.getElementById('target');
element.addEventListener('animationstart', () => {
console.log('动画开始');
});
element.addEventListener('animationend', () => {
console.log('动画结束');
});
element.addEventListener('animationiteration', () => {
console.log('动画迭代');
});使用第三方库（如 GSAP）
对于复杂动画场景，可以使用 GreenSock Animation Platform (GSAP) 等专业库。
// 引入 GSAP 后使用
gsap.to("#target", {
duration: 1,
opacity: 1,
x: 100,
ease: "power2.out"
});注意事项
- CSS3 动画性能通常优于 JavaScript 直接操作 DOM。
- 使用
transition和transform可触发硬件加速，提升流畅度。 - 移动端注意兼容性和性能优化，避免过多动画导致卡顿。
