问题标签 [web-animations]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Web Animation，如何为背景 rgba 颜色设置动画
我想为模态的 rgba 中的背景颜色设置动画，使其淡入。我不能使用不透明度作为模态内的 div 我不想透明。我不能使用 Jquery，但我正在使用 React。
我没有得到以下错误不起作用
javascript - 在 chrome 中使用自定义时间线的 Waapi 缓动被窃听
介绍
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 - web-animations-api 被抛弃了吗？
最近对用 JavaScript 实现动画很感兴趣，对 waapi 也很感兴趣。
所以我研究了相关的部分，问题太多了。首先，浏览器几乎没有支持，其次，polyfill 库的开发停止了。
我想知道这个 api 是否真的会被弃用。
javascript - 对象内的复合值用于在页面上递增地滑动点
我无法让变量在我的对象中作为 translateX 值正常工作。每次单击下一个按钮时，我都想让点在页面上滚动。我的代码只能在第一步中来回移动它。
我是动画 API 的新手，我已经使用 CSS 过渡完成了这项工作，但我正试图很好地处理 API。
html:
js：
CSS：
我设置它的方式，我希望 translateX 值根据单击事件侦听器增加或减少，这将使圆圈在页面上滑动。实际发生的是，只有第一步有效。它不会超过第一个停止点。如果我在控制台中记录 moveDot，它会给我我期望的值，但它只会在 0 和 190 开始/停止。后退按钮的功能相同。小提琴的链接
css - 没有 CSS 关键帧动画（Mozilla Firefox）
我正在尝试学习 CSS。我试图做一个简单的动画：通过使用关键帧改变跨度的背景颜色，但没有任何改变/动画
我的代码如下所示：
HTML：
CSS：
我使用 Mozilla，所以我认为不应该有任何兼容性问题。那么我的代码中的问题在哪里？
javascript - 什么是 waapi 有效的 css 属性
此处列出的一般 Animatable CSS 属性有区别吗？
某些 CSS 属性可以使用CSS Animations或CSS Transitions进行动画处理。动画意味着它们的值可以在给定的时间内逐渐变化。
waapi 是Css Animation的子集吗？
这些属性是否列在 dom 中的某个地方？还是我必须复制那些来检查字符串是否是这样的属性？
javascript - Web 动画 API 中的步骤
我想知道是否有一种方法可以使用 Web 动画 API 逐步制作 Web 动画，而无需手动声明每一帧的开始和结束的偏移量。显然你可以在 CSS 动画中做到这一点。
这是用于动画精灵表。
javascript - Web Animations API - 设置关键帧？
我一直在使用 Web Animations API，并且发现它非常直观，可以开始使用。
从我的角度来看，我想制作一个非常简单的动画，其中一个元素沿一个方向旋转，并且在按下按钮后沿另一个方向旋转。使用标准反向方法时，动画会因为时间用完而停止。
我尝试使用 setKeyframes 方法来更改变换方向，这似乎在 Chrome 中不起作用。在我的 Firefox 开发者版中，它工作得很好......
有人可以查看我的方法并告诉我是否遗漏了什么吗？请记住，总的来说，我对 JS 很陌生。
提前致谢，
尼克拉斯
javascript - 为什么 Web Animation API reverse() 会导致我的动画跳转？
各地的文档都说reverse()在播放动画时调用与设置playbackRate为 -1 相同，但我的动画在使用时会像疯了一样跳跃reverse()。playbackRate工作正常。我真的很想使用reverse()，因为它是独立于状态的，但恐怕我不明白。
我在这里有一个关于代码框的旋转方块的小例子：
https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js
我做错了什么还是reverse()不那么简单？
更新：
这可能是一个 Codesandbox 错误，因为@Kaiido 的这个小提琴工作正常。
我正在使用 Firefox 75.0 和 MacOS。铬似乎工作正常。
javascript - 如何让 Houdini 的 Animation Worklet 工作？
我终于开始用Animation Worklet做一些滚动绑定动画，只是为了发现Surma 的演示不起作用。甚至不是文章中的那个。
API 是否仍在旗帜后面？还是它以某种方式改变了？