在网页设计和开发领域，动画的运用越来越普遍，它不仅能让网页更加生动有趣，还能有效引导用户的注意力。而CSS和JavaScript（简称JS）则是实现这些动画效果的重要工具。今天，我们就来探讨如何结合这两种技术，使用 CSS 动画和 steps 函数可以创建逐帧动画，但是 CSS 动画本身不能直接被 JavaScript 控制其播放顺序和暂停。不过，可以通过操作 CSS 类和动画属性来间接实现这种控制。下面是一个简单的示例，展示了如何使用 CSS 和 JavaScript 实现一个可控制的逐帧动画。

HTML

<div id="animation-box"></div>

<button onclick="playForward()">正序播放</button>
<button onclick="playReverse()">倒序播放</button>
<button onclick="pauseAnimation()">暂停</button>

CSS

@keyframes forward {
  0% { background-position: 0 0; }
  100% { background-position: -200px 0; }
}

@keyframes reverse {
  0% { background-position: -200px 0; }
  100% { background-position: 0 0; }
}

#animation-box {
  width: 100px;
  height: 100px;
  background-image: url('path/to/your/sprite.png');
  background-repeat: no-repeat;
  animation-duration: 2s;
  animation-timing-function: steps(2, end);
  animation-fill-mode: both;
}

JavaScript

let isPlaying = false;
let animationDirection = 'forward';

function playForward() {
  if (!isPlaying) {
    document.getElementById('animation-box').style.animationName = 'forward';
    isPlaying = true;
  }
}

function playReverse() {
  if (!isPlaying) {
    document.getElementById('animation-box').style.animationName = 'reverse';
    isPlaying = true;
  }
}

function pauseAnimation() {
  document.getElementById('animation-box').style.animationName = '';
  isPlaying = false;
}

在这个例子中，我们有两个关键帧动画：forward 和 reverse。forward 动画从左到右移动背景位置，而 reverse 动动画则相反。通过 JavaScript 控制 animation-name 属性来切换这两个动画，从而实现正序和倒序播放。pauseAnimation 函数通过清除 animation-name 来停止动画。

注意，这个例子假设你有一个精灵图（sprite image）作为背景，并且每帧的宽度是 100px。你需要根据实际情况调整 background-position 的值和动画的持续时间。