CSS3动画如何与JavaScript交互

CSS3 动画可以通过 JavaScript 进行控制，实现更复杂的交互效果。以下是一些常见的方法：

1. 使用 JavaScript 修改 CSS 样式：

   你可以通过 JavaScript 直接修改元素的 CSS 样式，从而改变 CSS 动画的属性。例如：

   const element = document.querySelector('.animated-element');
   element.style.animationName = 'newAnimation';
   

2. 使用 JavaScript 添加/删除类名：

   如果你的 CSS 动画是通过类名控制的，可以使用 JavaScript 添加或删除类名来触发动画。

   const element = document.querySelector('.animated-element');
   element.classList.add('animation-start');
   

   然后在 CSS 中定义动画：

   @keyframes animationStart {
     /* 动画关键帧 */
   }
   
   .animation-start {
     animation-name: animationStart;
   }
   

3. 使用 JavaScript 监听动画事件：

   CSS 动画有一些事件，如 animationstart、animationend 和 animationiteration，可以通过 JavaScript 监听这些事件，实现动画与其他交互的联动。

   const element = document.querySelector('.animated-element');
   element.addEventListener('animationend', () => {
     console.log('动画结束');
   });
   

4. 使用 Web Animations API：

   Web Animations API 是一个原生的 JavaScript API，可以用来创建和控制 CSS 动画。它提供了比 CSS3 动画更强大的功能，如动画暂停、恢复、取消等。

   const element = document.querySelector('.animated-element');
   const animation = element.animate([
     { transform: 'translateX(0)' },
     { transform: 'translateX(100px)' }
   ], {
     duration: 1000,
     iterations: Infinity
   });
   
   // 暂停动画
   animation.pause();
   
   // 恢复动画
   animation.play();
   
   // 取消动画
   animation.finish();
   

通过这些方法，你可以实现 CSS3 动画与 JavaScript 的交互，为你的网页添加更丰富的动态效果。