javascript - 无需重置即可反转背景位置动画

Question

我用 CSS 创建了一个动画，随着时间的推移改变元素的 background-position，以创建一种带有背景的滚动效果。

@keyframes stars-animate {
    0% {
        background-position: 0 -500px;
    }
    100% {
        background-position: 2000px -500px;
    }
}

这非常有效。但是，我还想开始倒带动画并创建反向滚动事件。这是由一些不相关的操作触发的。

function triggerReverse(element) {
    element.style.animationDirection = 'reverse';
}

但是，当我将 animation-direction 设置为 reverse 时，它确实起作用，但在它翻转整个背景之前不起作用。

是我做错了，还是做错了，如果是这样，什么是正确的方法？

编辑:我需要能够在播放时反转动画

Answer 1

更新

下面更新的示例代码提供了使用户能够中断/暂停动画(在第一次迭代期间)并立即开始反转动画的效果。

这里是用时间来控制。记录从动画开始耗时，并计算如何开始反向动画。在 css 中定义了 2 迭代来形成一个完整的循环。在没有用户干预的情况下，动画会在第一次迭代后暂停/停止。但如果存在，则暂停迭代并立即以计算的 animation-delay 时间重新启动它。这看起来像是一个直接的逆转，但实际上这是一个新的开始。

还有一个关于如何重新启动动画的技巧。请引用代码注释。

我四处搜索，但发现到目前为止没有人提到过类似的场景，也没有类似的解决方案。与其用时间来控制，不如看看其他更好的方法。

我的测试也证明，不同的运行环境渲染的流畅度略有不同。幸运的是，这里的 SO 是最好的。

尝试该解决方案，看看它是否适用于您自己的场景。

const span = document.querySelector('span'),
  button = document.querySelector('button'),
  duration = 10; // animation-during

let startTime;

span.addEventListener('animationstart', () => {
  startTime = Date.now();
  button.style.visibility = 'visible';
});

span.addEventListener('animationiteration', () => span.style.animationPlayState = 'paused');

span.addEventListener('animationend', () => {
  button.style.visibility = 'hidden';
});

button.addEventListener('click', () => {
  span.classList.remove('my_anim');
  void span.offsetWidth; // safely apply changes
  span.classList.add('my_anim');
  const elapsed = Date.now() - startTime;
  const delay = (elapsed < duration * 1000) ? (elapsed / 1000 - duration * 2) : -duration;
  span.style.animationDelay = `${delay}s`;
  span.style.animationPlayState = 'running';
});

span.my_anim {
  animation: 10s 2 alternate my_move;
}

@keyframes my_move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 50%;
  }
}

button {
  visibility: hidden;
}

<div>
  <span class="my_anim">@</span>
</div>
<button>reverse</button>

---

此示例不使用 background-position 来制作动画，而是使用普通字符。

const span = document.querySelector("span"),
  button = document.querySelector("button");

span.addEventListener(
  "animationiteration",
  function() {
    this.classList.add("paused");
    button.style.visibility = "visible";
  }
);

button.addEventListener(
  "click",
  function() {
    this.style.visibility = "hidden";
    span.classList.remove("paused");
  }
); 

span {
  animation: 3s 2 alternate my_move;
}

span.paused {
  animation-play-state: paused;
}

@keyframes my_move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 50%;
  }
}

button {
  visibility: hidden;
}

<div>
  <span>@</span>
</div>
<button>reverse</button>

注意:必要时为css动画使用-webkit-前缀。