JavaScript 中，可以使用 Element.animate() 方法来创建动画效果

创建一个移动动画

const element = document.getElementById('box');
element.animate([
  // 开始状态
  { transform: 'translateX(0px)' },
  // 结束状态
  { transform: 'translateX(100px)' }
], {
  // 动画持续时间
  duration: 1000,
  // 延迟时间
  delay: 500,
  // 重复次数
  iterations: Infinity
});

创建一个渐变动画

const element = document.getElementById('box');
element.animate([
  // 开始状态
  { opacity: 0 },
  // 结束状态
  { opacity: 1 }
], {
  // 动画持续时间
  duration: 1000,
  // 延迟时间
  delay: 500,
  // 重复次数
  iterations: Infinity
});

创建一个组合动画

const element = document.getElementById('box');
element.animate([
  // 开始状态
  { opacity: 0, transform: 'translateX(0px)' },
  // 结束状态
  { opacity: 1, transform: 'translateX(100px)' }
], {
  // 动画持续时间
  duration: 1000,
  // 延迟时间
  delay: 500,
  // 重复次数
  iterations: Infinity
});

需要注意的是，Element.animate() 方法并非所有浏览器都支持，可以使用 CSS3 动画或 JavaScript 定时器等其他方法来实现兼容性更好的动画效果