问题标签 [web-animations]

我使用“Web Animations API”为项目创建动画。在 chrome 中一切正常。但到还没有在 mazilla 和 safar 那里。Safari 只是跳过了这个动画。但是 mazilla 犯了一个严重的错误。

错误的本质是我操纵了svg元素的元素。

是的，我知道这只能通过 SVG2 标准来完成。但也许还有另一种解决方案，polyfills ...

我试过r，attr.r ...

感谢您的任何帮助。

我正在尝试创建一个动画，该动画采用页面上任何位置的图像并将其移动到中间，同时将其大小调整为浏览器窗口的全宽。我的解决方案有效，但有一些口吃/跳跃，我无法真正解释。有没有人已经尝试过创建类似的动画？编辑：我注意到口吃问题似乎只出现在 macOS Safari 中。在其他浏览器中，此动画似乎运行得非常流畅。

这是我的js代码：

示例 HTML+CSS 代码，但它可以是网站上带有 ID 的任何图像：

HTML：

CSS：

我还制作了一个 jsfiddle，很好地显示了口吃问题： https ://jsfiddle.net/robske_110/vhz5Ln4o/11/

我使用的是 Chrome 版本 67.0.3396.99（64 位）。

Web Animations API上的 Mozilla 文档描述了getAnimations()如下方法：

但是 Chrome 似乎不支持它。我试过了……</p>

…也根据 Daniel C. Wilson 的这篇博文，但它在 Chrome 67 上中断并出现以下错误：

有没有办法使用 web 动画 api 检索应用于 HTML 元素的动画数组？

我正在尝试制作一个可以运行生化模拟的 Web 应用程序，并且我想在模拟运行时显示模拟的交互式动画。但是，实际的模拟器已经是用python制作的，我担心不断地向服务器发出HTTP请求以获得模拟结果会太慢。有没有一种方法可以让我在客户端运行模拟，或者在不重新加载页面的情况下快速访问 python 模拟器？

我尝试使用 npm install gsap 实现 Gsap，但它不起作用。你能解释一下如何在 Angular 7 中使用 gsap。我想为我的 angualr 7 项目实现动画

我一直在修补 JavaScript (React JS)、Python、HTML 和 CSS。在这样做的过程中，我偶然发现了一些动画——其中大部分是标准的 css 动画（例如transition: width 2s;）。但是我越来越想知道如何制作更复杂的自定义交互式动画，我根本无法找出正确的技术来学习达到预期的结果（是的，在问这个非常广泛的一般性问题之前我使用了搜索功能）。HTML5 画布似乎是一种灵活且多功能的工具，但我不知道它们是否适合我的想法。

让我给你一个我想做的例子：

• 流程可视化：公司的资源被动画化为移动的物体，沿着一条不固定的路径移动，而是由公司供应链的结构产生的。
• 拖放功能：可以通过拖放将供应商等元素添加到供应链中
• 复杂的自定义图表（我知道存在强大的库来实现这一点，例如 AnyChart）：图表源自显示生命数据的过程数据。我可以在图表中单击以添加新数据点。

我不是在寻找另一个 JS 库，而是在寻找自己构建这些动画的技术。我也在寻找一个开始学习这些技术的好点。所以真正的问题是：我需要学习什么才能创建这些交互式动画，HTML5 画布是正确的工具吗？有哪些类型的交互式动画技术以及何时使用它们？

谢谢你。

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

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

示例代码：

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

我正在尝试为选项卡内的简单 div 设置动画。选项卡的内容是不同的组件。

父组件：

我想要实现的是在我单击该特定选项卡时为 app-profile-companies 组件中的 div 设置动画。我不太确定如何做到这一点，我还在学习，还不是 Angular 的专家。

使用成帧器动作，当悬停在作为按钮的父元素上时，我想动画我的图标组件旋转 90 度。

我看到了变体的使用，但不确定如何真正将它们与whileHover.

任何帮助将不胜感激，因为这是一个新事物。

我正在为剪辑路径设置动画，在我进入 safari 之前效果很好，我需要-webkit-前缀。

我知道我可以使用 css 对其进行动画处理，但我需要将变量动态分配到该位置的剪辑路径中。在普通的旧 css 中无法完成的事情。

这是我的anime.js 对象

理想情况下，我会使用anime.js来支持这个开箱即用，也许我错过了一些东西。

我在文档或在线中找不到任何这种性质的东西，所以如果有任何解决方法，任何人都可以想到我对想法持开放态度。我将anime.js 用于网站的其他方面（动画徽标等），所以如果可能的话，我想坚持下去。