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设置为反向时，它确实有效，但在它翻转整个背景之前不会。

我做错了，或者这是错误的做法，如果是这样，那么正确的方法是什么？

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

Answer 1

<强>更新

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

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

还有一个关于如何重新开始动画的技巧。请参阅代码注释。

我四处搜索，但发现到目前为止没有人提到类似的情况，也没有类似的解决方案。我希望看到其他更好的方法，而不是用时间来控制。

我的测试也证明了不同的运行环境呈现出略微不同的平滑度。幸运的是，这里的SO是最好的。

尝试解决方案，看看它是否适合您自己的情况。

＆＃13;

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';
});

＆＃13;

span.my_anim {
  animation: 10s 2 alternate my_move;
}

@keyframes my_move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 50%;
  }
}

button {
  visibility: hidden;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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");
  }
);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

NB ：必要时使用-webkit-前缀作为css动画。

反向背景位置动画而不重置

1 个答案: