CSS动画与JavaScript[编辑 | 编辑源代码]

CSS动画与JavaScript的结合为现代网页开发提供了强大的动态效果控制能力。本教程将系统讲解两者协同工作的原理、实现方式及实际应用场景。

核心概念[编辑 | 编辑源代码]

CSS动画基础[编辑 | 编辑源代码]

CSS动画通过@keyframes规则和animation属性实现，例如：

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.box {
  animation: slideIn 1s ease-out;
}

JavaScript动画控制[编辑 | 编辑源代码]

JavaScript可以通过DOM API动态修改CSS动画属性：

const box = document.querySelector('.box');
box.style.animation = 'slideIn 2s ease-in-out';

深度集成方案[编辑 | 编辑源代码]

事件监听[编辑 | 编辑源代码]

CSS动画事件可通过JavaScript监听：

element.addEventListener('animationstart', (e) => {
  console.log(`动画开始: ${e.animationName}`);
});

element.addEventListener('animationend', (e) => {
  console.log(`动画结束: ${e.animationName}`);
});

性能优化技术[编辑 | 编辑源代码]

使用requestAnimationFrame实现高效动画循环：

function animate() {
  // 计算新位置
  element.style.transform = `translateX(${progress}px)`;
  
  if (progress < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

实际应用案例[编辑 | 编辑源代码]

交互式动画控制[编辑 | 编辑源代码]

结合CSS变量实现动态参数传递：

<style>
  .progress-bar {
    --progress: 0;
    width: calc(var(--progress) * 1%);
  }
</style>

<script>
  const slider = document.getElementById('slider');
  const bar = document.querySelector('.progress-bar');
  
  slider.addEventListener('input', () => {
    bar.style.setProperty('--progress', slider.value);
  });
</script>

复杂动画序列[编辑 | 编辑源代码]

使用JavaScript编排多个CSS动画：

async function playAnimationSequence() {
  element1.style.animation = 'fadeIn 0.5s';
  await waitForAnimation(element1);
  
  element2.style.animation = 'slideUp 0.3s';
  await waitForAnimation(element2);
}

function waitForAnimation(element) {
  return new Promise(resolve => {
    element.addEventListener('animationend', resolve, { once: true });
  });
}

数学原理[编辑 | 编辑源代码]

贝塞尔曲线在动画时序中的应用：

$B (t) = P_{0} (1 - t)^{3} + 3 P_{1} t (1 - t)^{2} + 3 P_{2} t^{2} (1 - t) + P_{3} t^{3}$

其中 $P_{0}$ 到 $P_{3}$ 为控制点， $t$ ∈[0,1]

性能对比表[编辑 | 编辑源代码]

动画技术性能比较
技术	适用场景	GPU加速	主线程负载
简单属性变化 \| 是 \| 低
复杂关键帧动画 \| 是 \| 中
需要精确控制 \| 部分 \| 高

最佳实践[编辑 | 编辑源代码]

1. 优先使用CSS动画处理视觉变化 2. 使用JavaScript处理用户交互逻辑 3. 避免在动画中触发重排(reflow) 4. 使用will-change属性提示浏览器优化 5. 对移动设备使用transform和opacity属性以获得最佳性能

常见问题[编辑 | 编辑源代码]

Q: 何时应该选择JavaScript动画而非CSS动画？ A: 当需要：

基于物理的动画效果
滚动关联动画
需要实时计算的复杂路径动画
与复杂用户输入交互的动画

Q: 如何检测浏览器是否支持特定动画特性？

if ('animation' in document.body.style) {
  // 支持基础动画
}
if (CSS.supports('animation-timeline: scroll')) {
  // 支持滚动时间轴动画
}