当前位置：首页 > JavaScript

js实现css3动画

2026-03-01 07:51:48JavaScript

使用JavaScript实现CSS3动画

JavaScript可以通过直接操作DOM元素的样式或类名来触发CSS3动画。以下是几种常见方法：

通过添加/移除类名触发动画

定义CSS关键帧动画和动画类：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade {
  animation: fadeIn 1s ease-in-out;
}

JavaScript代码：

js实现css3动画

const element = document.getElementById('target');
element.classList.add('animate-fade');

// 动画结束后移除类名
element.addEventListener('animationend', () => {
  element.classList.remove('animate-fade');
});

直接操作style属性

const element = document.getElementById('target');
element.style.animation = 'fadeIn 1s ease-in-out';

使用Web Animations API

现代浏览器支持的更强大的动画API：

js实现css3动画

const element = document.getElementById('target');
element.animate([
  { opacity: 0 },
  { opacity: 1 }
], {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: 1
});

控制动画播放

暂停和恢复动画

const animation = element.animate([...]);
animation.pause();  // 暂停
animation.play();    // 恢复

监听动画事件

element.addEventListener('animationstart', () => {
  console.log('动画开始');
});

element.addEventListener('animationend', () => {
  console.log('动画结束');
});

element.addEventListener('animationiteration', () => {
  console.log('动画重复播放');
});

动态创建关键帧动画

通过JavaScript动态创建@keyframes规则：

const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
const keyframes = `
  @keyframes dynamicFade {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
`;
styleSheet.sheet.insertRule(keyframes, styleSheet.sheet.cssRules.length);

// 应用动态创建的动画
element.style.animation = 'dynamicFade 1.5s ease';

性能优化建议

优先使用transform和opacity属性进行动画，这些属性不会触发重排
对于复杂动画，考虑使用will-change属性提前告知浏览器
避免在动画过程中频繁触发回流和重绘
对于需要高性能的动画，考虑使用CSS的硬件加速特性

浏览器兼容性处理

// 检测浏览器是否支持Web Animations API
if ('animate' in HTMLElement.prototype) {
  // 使用Web Animations API
} else {
  // 回退到CSS动画
  element.classList.add('fallback-animation');
}

以上方法提供了从简单到高级的JavaScript控制CSS3动画的实现方式，可以根据项目需求和浏览器支持情况选择最适合的方案。