使用JavaScript实现文本动画

// 获取要进行动画的文本元素
const textElement = document.getElementById('text');

// 定义动画效果的关键帧
const keyframes = [
  { transform: 'translateX(0)' },
  { transform: 'translateX(100px)' },
  { transform: 'translateX(0)' }
];

// 定义动画的配置项
const options = {
  duration: 1000, // 动画持续时间，单位为毫秒
  iterations: Infinity, // 动画重复次数，Infinity表示无限循环
  direction: 'alternate', // 动画方向，alternate表示来回循环
  easing: 'ease-in-out' // 缓动函数，控制动画的速度变化
};

// 创建动画对象
const animation = textElement.animate(keyframes, options);

// 暂停动画
animation.pause();

// 播放动画
animation.play();