css3动画事件：CSS3动画事件实战，掌握animation事件的完整指南

来源：网络作者：日期：2025-10-29 06:20:39

在现代Web开发中,CSS3动画已经成为提升用户体验的重要手段，而CSS3动画事件（Animation Events）作为控制动画生命周期的关键工具，能够让开发者在动画的不同阶段执行自定义操作，本文将深入解析CSS3动画事件的核心概念、使用方法及实战案例，助你轻松掌控动画流程。

什么是CSS3动画事件？

CSS3动画事件（animation events）是浏览器在动画生命周期中触发的事件，主要包括以下几种：

animationstart：动画开始播放时触发。
animationend：动画完成一次循环后触发。
animationiteration：每次动画迭代（循环）时触发。

这些事件与JavaScript结合使用,可以实现动画状态的监听与交互控制。

基础语法与实现

HTML结构

<div class="box">点击开始动画</div>

CSS动画定义

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

添加事件监听

const box = document.querySelector('.box');
box.addEventListener('click', () => {
  box.style.animationPlayState = 'running';
});
box.addEventListener('animationstart', () => {
  console.log('动画开始');
});
box.addEventListener('animationend', () => {
  console.log('动画结束');
});
box.addEventListener('animationiteration', () => {
  console.log('动画迭代');
});

实战案例：交互式动画控制

案例需求

创建一个点击按钮后,元素从左侧滑入并循环移动的动画，同时记录动画状态。

css3动画事件：CSS3动画事件实战，掌握animation事件的完整指南

完整代码实现

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #e74c3c;
      position: absolute;
      left: -100px;
      top: 50%;
      transform: translateY(-50%);
      animation-name: slide;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    @keyframes slide {
      0% { left: -100px; }
      50% { left: 50%; }
      100% { left: calc(100% - 100px); }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');
    // 监听动画事件
    box.addEventListener('animationstart', () => {
      console.log('动画开始');
    });
    box.addEventListener('animationend', () => {
      console.log('动画结束');
    });
    box.addEventListener('animationiteration', () => {
      console.log('动画迭代');
    });
    // 触发动画
    setTimeout(() => {
      box.style.animationPlayState = 'running';
    }, 1000);
  </script>
</body>
</html>

进阶应用：动态效果增强

延迟加载动画

window.addEventListener('load', () => {
  const elements = document.querySelectorAll('.animated');
  elements.forEach(el => {
    el.style.animation = 'fadeIn 1s forwards';
  });
});

响应用户交互

const button = document.createElement('button');
button.textContent = '启动动画';
button.addEventListener('click', () => {
  box.style.animation = 'slide 2s infinite';
});

性能优化

使用will-change属性预知动画元素
避免过度使用复杂动画
在关键帧中使用transform和opacity等高效属性

浏览器兼容性处理

const events = ['animationstart', 'animationend', 'animationiteration'];
events.forEach(eventName => {
  if (eventName in window) {
    // 事件存在
  } else if (eventName === 'animationend') {
    // 兼容处理
    window[eventName] = 'webkit' + eventName;
  }
});