给定一个网络动画，比如这里的那个：https ://codepen.io/arxpoetica/pen/aXqEwe

如何在任何给定时间点根据关键帧之间的状态获取 CSS 或样式信息？

示例代码：

注意：此 API 仅适用于有限的浏览器/平台。

Web Animation API 支持关键帧动画，所以你可以去“from”和“to”：

有没有办法去“到”而不必指定“从”？就像是：

或者我必须将当前位置存储在其他地方？

我希望我的页面以一个简单的动画开始，它介绍了我可以做的“嗨，我的名字是保罗，我做网站”之类的事情。

为了实现它，我认为使用 Javascript Web Animations API 将是一个很好的机会来立即展示我使用 vanilla javascript 的能力（我正在制作部分来展示我使用框架和 WordPress 的能力），但是，在开始之后我注意到了一些发生了奇怪的事情，可能是因为我没有正确使用它。

Codepen：https ://codepen.io/makingstuffs/pen/xxKVoKK

我希望初始文本 Hi 淡入。完成后，我希望我的名字是 Paul 从左侧进入。完成后，我希望 Hi 掉入页面。

这是动画的开头三帧，我已经使用 onfinish 事件/承诺让它工作。

然而，一个问题是最后一帧似乎也影响了前一帧的文本。

我想问这是否是我使用 API 的结果，或者这是否是 API 中的错误，我最好简单地使用 CSS 关键帧和链接事件侦听器来侦听每个转换完成和然后应用特定的关键帧类？

介绍

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

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

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

html:

js：

CSS：

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

在浏览器中放大时，scaleX() 属性并不一致。TranslateX() 完全按照它应该的方式工作，这就是我伸出援手的原因。

我正在使用 Web Animations API 和 Vanilla JS 构建一个阶梯式进度条，其目的是在其中插入一个表单，以便在我们逐步执行表单步骤时，动画/步骤将显示通过它的进度。我遇到的问题是当我测试 ADA 合规性时，特别是在放大页面时。更具体地说，只有当缩放百分比不是 100 的倍数时。所以 100、200、300 和 400% 可以完美地工作。但是 110、125、250%，仅举几例，有问题。在屏幕上滑动的点正在正常工作。

意外的行为出现在与点一起在屏幕上扩展的条中，有时它走得太远，有时它走得不够远。真正让我感到困惑的是，条形图和点形图都由相同的测量值“控制”，即取父 div 的宽度并除以 3，然后乘以当前步长。这就是让我假设问题出在 scaleX 变换中的原因。我仍在 IE 中进行整体测试，在 chrome 和 firefox 中遇到问题。

HTML：

CSS：

JS：

我希望点和滑块在穿过页面时对齐，无论缩放百分比如何

我有一个用于绘制leaflet.js 标记的CSS 类。使用 Javascript 和剃须刀页面表单，用户在创建标记时设计标记的外观，其中一个参数是标记在设置为闪烁模式时将发光的颜色。从下面的代码中，到目前为止，我已经能够更改标记的一般配色方案，但我正在努力弄清楚如何访问“@keyframes 发光”的背景颜色和框阴影属性，以便我可以在创建标记期间覆盖十六进制颜色值：

CSS类：

我的剃须刀页面上的 Javascript：

我有一个简单的动画测试，如下面的代码所示。这只是为了展示我目前遇到的问题。如果我在关键帧脚本中硬编码十六进制颜色值，一切正常。对于我的项目，我需要能够使用变量覆盖颜色值，你可以在关键帧代码中看到我已经用一个名为“markerColor”的变量替换了一个硬编码的十六进制值，但是一旦我这样做，动画就不会运行该订单项。语法可能有问题，但我无法弄清楚解决方案是什么，任何帮助都会非常感谢。

我正在用 JavaScript 制作一个简单的动画。我使用了来自Web Animation API的 Animation 类。我只想再创建几个该类的实例，并希望用不同的值为不同的元素设置动画并替换 translateX 的变换值。我已经设置了我的构造函数，我只想动态地将值传递给 translateX；

这是我的完整项目

JavaScript 文件

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

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

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

提前致谢，
尼克拉斯

JSFiddle 与我的代码