如何在JavaScript中创建自定义动画？

在JavaScript中创建自定义动画通常使用CSS Transitions、CSS Animations或JavaScript（如requestAnimationFrame API）来实现。这里我会介绍三种常见的方法：

1. **CSS Transitions**:
CSS transitions可以通过改变元素的样式属性（如`transform`, `opacity`, `width`等），并在一段时间内平滑地过渡到新的值。例如：

   <style>
     .my-element {
       transition: transform 0.5s;
     }
     
     .my-element:hover {
       transform: scale(1.2);
     }
   </style>

   <div class="my-element">Hover me</div>

2. **CSS Animations**:
CSS animations则更灵活，你可以定义完整的动画序列，包括关键帧和持续时间。创建动画的关键在于定义`.keyframes`规则：

   @keyframes myAnimation {
     0% { opacity: 0; }
     100% { opacity: 1; }
   }

   .my-animation-container {
     animation: myAnimation 2s ease-in-out infinite;
   }

3. **JavaScript with requestAnimationFrame**:
如果需要更精细的控制或者动画依赖于复杂的数据变化，JavaScript是更好的选择。`requestAnimationFrame`用于确保动画是在浏览器重绘之前进行的，避免了不必要的计算。示例：

   let start = null;
   
   function animate(timestamp) {
     if (!start) start = timestamp;
     const progress = timestamp - start;
     // 更新元素位置
     element.style.transform = 'translateX(' + progress * 100 + '%)';
     if (progress < 1000) {
       window.requestAnimationFrame(animate);
     } else {
       console.log('Animation finished');
     }
   }
   
   animate();

记得要在兼容性良好的情况下编写动画代码，可能需要添加polyfills支持旧版本浏览器。