我想为模态的 rgba 中的背景颜色设置动画，使其淡入。我不能使用不透明度作为模态内的 div 我不想透明。我不能使用 Jquery，但我正在使用 React。

我没有得到以下错误不起作用

介绍

TLDR：https ://codesandbox.io/s/elated-jennings-6budz 。为什么红色与铬中的蓝色不一样？这是一个错误吗？

我使用的是chrome版本：76.0.3809.132。在 Firefox 中，一切都按预期工作。

问题

我使用 waapi 来实现依赖于自定义时间轴的动画（例如滚动位置作为时间轴）。这个概念如下：

waapi 允许您通过将iterationStart选项设置在 0 和 1 之间的某个位置（假设动画只有一次迭代）来中途开始动画。当动画立即暂停时，我们得到请求的帧。当下一个输入进入时，我们会覆盖最后一帧。

因此，当我们得到 0.5 的输入时，我们将使用以下代码：

即使我们每 1/60 秒设置一个这样的帧，这也很有效。然而，问题出现了，因为我们想要缓和动画（例如easing: "ease"not linear）。这引入了奇怪的故障，动画每次都以相同的进度跳跃（进度 = 迭代饱和度 / 输入）。例如，第一个跳转是0.148使用easeas easing 函数。有人可以解释这种行为吗？这是一个错误吗？

我遇到了以下相关性。0.148 * 2轻松的ease功能刚刚结束0.5。为了计算这个，我使用bezier-easing图书馆。这里的例子：https ://runkit.com/embed/1wetjf7jjb2s 。我不知道这是否相关，但我想我会分享我的发现。

这里显示问题的代码和框链接： https ://codesandbox.io/s/elated-jennings-6budz 。请注意不要让它一次运行太久而不重新加载。

蓝色 div 使用修复来显示预期结果。为此，我保留但习惯性地使用如上所示easeing: "linear"的库（和代码中）简化每个输入。bezier-easing

最近对用 JavaScript 实现动画很感兴趣，对 waapi 也很感兴趣。

所以我研究了相关的部分，问题太多了。首先，浏览器几乎没有支持，其次，polyfill 库的开发停止了。

我想知道这个 api 是否真的会被弃用。

我无法让变量在我的对象中作为 translateX 值正常工作。每次单击下一个按钮时，我都想让点在页面上滚动。我的代码只能在第一步中来回移动它。

我是动画 API 的新手，我已经使用 CSS 过渡完成了这项工作，但我正试图很好地处理 API。

html:

js：

CSS：

我设置它的方式，我希望 translateX 值根据单击事件侦听器增加或减少，这将使圆圈在页面上滑动。实际发生的是，只有第一步有效。它不会超过第一个停止点。如果我在控制台中记录 moveDot，它会给我我期望的值，但它只会在 0 和 190 开始/停止。后退按钮的功能相同。小提琴的链接

我正在尝试学习 CSS。我试图做一个简单的动画：通过使用关键帧改变跨度的背景颜色，但没有任何改变/动画

我的代码如下所示：

HTML：

CSS：

我使用 Mozilla，所以我认为不应该有任何兼容性问题。那么我的代码中的问题在哪里？

此处列出的一般 Animatable CSS 属性有区别吗？

某些 CSS 属性可以使用CSS Animations或CSS Transitions进行动画处理。动画意味着它们的值可以在给定的时间内逐渐变化。

waapi 是Css Animation的子集吗？

这些属性是否列在 dom 中的某个地方？还是我必须复制那些来检查字符串是否是这样的属性？

我想知道是否有一种方法可以使用 Web 动画 API 逐步制作 Web 动画，而无需手动声明每一帧的开始和结束的偏移量。显然你可以在 CSS 动画中做到这一点。

这是用于动画精灵表。

我一直在使用 Web Animations API，并且发现它非常直观，可以开始使用。
从我的角度来看，我想制作一个非常简单的动画，其中一个元素沿一个方向旋转，并且在按下按钮后沿另一个方向旋转。使用标准反向方法时，动画会因为时间用完而停止。

我尝试使用 setKeyframes 方法来更改变换方向，这似乎在 Chrome 中不起作用。在我的 Firefox 开发者版中，它工作得很好......

有人可以查看我的方法并告诉我是否遗漏了什么吗？请记住，总的来说，我对 JS 很陌生。

提前致谢，
尼克拉斯

JSFiddle 与我的代码

各地的文档都说reverse()在播放动画时调用与设置playbackRate为 -1 相同，但我的动画在使用时会像疯了一样跳跃reverse()。playbackRate工作正常。我真的很想使用reverse()，因为它是独立于状态的，但恐怕我不明白。

我在这里有一个关于代码框的旋转方块的小例子：

https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js

我做错了什么还是reverse()不那么简单？

更新：

• 这可能是一个 Codesandbox 错误，因为@Kaiido 的这个小提琴工作正常。

• 我正在使用 Firefox 75.0 和 MacOS。铬似乎工作正常。

我终于开始用Animation Worklet做一些滚动绑定动画，只是为了发现Surma 的演示不起作用。甚至不是文章中的那个。

API 是否仍在旗帜后面？还是它以某种方式改变了？