问题标签 [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 - 使用 element.animate() 对曲线上的元素进行动画处理
我需要通过如下所示的路径对元素的翻译进行动画处理：
现在我正在使用一个requestAnimationFrame回调来计算De Casteljau曲线上的位置，然后通过内联 CSS 设置元素位置translate3d()。这很有效，尽管与 CSS 动画相比
，它的性能更差并且非常冗长。
当目标仅在运行时已知时， Web 动画似乎是一个很好的新选项来为元素设置动画，但我找不到任何东西来修改起点和终点之间的动画。
是否可以使用 来完成上述操作element.animate()，或者它是否比 CSS 动画更可定制？
javascript - 使用 Web Animations 创建右幻灯片和淡出单实例动画
我正在寻找使用新规范和 polyfill 创建网络动画。我试图创建的动画是让一个元素向右移动 1024 像素并淡出。然后就是这样，它不会重置，动画只是结束。
我正在尝试使用新的 Web Animations Spec 来实现这一点。这是 github 上的 polyfill：https ://github.com/web-animations/web-animations-js
这是我用于动画的代码，但它只是将项目淡出然后重置为完全不透明度。它不动。而且我不希望它在完成后重置。
这是一个带有该代码和 polyfill 的 JS Fiddle：http: //jsfiddle.net/Wz8A8/
更新：似乎一次只需要一个属性来制作动画。关于如何做多个属性的任何想法？也可以只做'到'结束值而不是从关键帧开始，只是在关键帧结束？
javascript - 使用 Web 动画制作 DOM 属性 (scrollTop)
Web Animations 是一个新的 w3c 规范，只是为了清楚我们在说什么。无论哪种方式，我都想平滑地滚动到某个元素。使用 jQuery 的Animate函数这总是很容易的，但对于 Web 动画，这似乎并不那么简单。有没有办法使用 Web 动画计时功能并将它们应用于 DOM 属性（scrollTop）。我问的原因是我不想加载整个（额外的）库只是为了使用它的插值函数，同时在我的应用程序的其余部分使用不同的技术/库。
javascript - 使用 Web Animations API 将元素翻转到特定位置
我正在尝试制作一个像这样工作的网络效果：
（它其实和卡片没有关系，只是用卡片来比喻；它实际上是一个图像。并且没有卡片的“堆叠”，它只是浏览器窗口中的一个固定位置。）
有牌随意摆放，有“叠”位。
将鼠标悬停在一张卡片上，它会翻转（rotateX 360 度）并转换为“堆叠”位置。
当鼠标在任何地方移动时，它仍然存在。
如果鼠标悬停在另一张卡片上，堆叠中的卡片会翻转回原来的位置，而新卡片会翻转到堆叠位置。
等等...
我正在使用 Chrome 39 并希望尽可能使用 Web Animations API 来执行此操作，因为我相信它会产生最好的表示。如果没有，Chrome 39 可以轻松支持任何可能的解决方案：CSS、JQuery、JavaScript、Dart、QML 等。
这个垃圾小动画就是我所拥有的：
感谢任何帮助！
svg - 使用 web 动画为 SVG rect 元素的宽度属性（不是 CSS 属性）设置动画
我正在使用 web-animations API 通过更改其宽度来为 SVG 元素设置动画：
但它动画 CSS 属性宽度而不是元素的属性宽度，这导致元素根本没有变化。
有没有办法在属性宽度上应用动画？
谢谢
polymer - Polymer - 网络动画交错 AnimationSequence
我试图AnimationSequence用一个负延迟来错开我，但是endDelay当我在 AnimationSequence 上使用它时，该属性什么也不做：
el[i].animationGroupIn是一个包含两个动画的 AnimationGroup。
endDelay通过修改 Web Animations-next 源（web-animations-js/src/animation-constructor.js - 第 17-19 行），我确实设法让它错开负数：
AnimationSequence 是否有公共属性，因此可以重叠动画以使动画看起来更流畅？
css - 从哪里开始实现这个动画效果
如何实现这种动画效果（见下面的链接）以及我需要从哪里开始学习，这部分是css还是html5或插件等。
我有css和html5的启动知识，但是不知道怎么实现效果。
http://www.terredevenements.com/en/
*我指的效果是在鼠标悬停时前景图像的移动并且仍然保持其背景为静态
javascript - 网页动画 API 回调函数
我刚刚发现了Web Animations API，我试图弄清楚如何为这些动画引入回调函数..我尝试使用以下
查看本节的 w3c 规范，我认为该onfinish属性是我需要使用的，但没有任何反应。
我也尝试过使用 jQuery 回调语法；
但这当然也行不通。任何想法，我相信这很简单，我只是还没有找到信息。
svg - 如何针对 CPU 负载优化 SVG 动画？
我正在使用 SVG/SMIL 开发解释性线条动画，并在 Firefox 中观看动画时遇到高 CPU 负载。SVG 本身和声明性动画在 CPU 性能方面是否有任何最佳实践？由于不同的查看器和浏览器会产生不同的结果，因此我正在寻找一般的经验法则，我也希望能够将其转换为 Web Animations API。
javascript - Javascript动画框架
我正在寻找一个 javascript 动画框架。我发现了一些：
这些都很好。
但我想要一个基于 GUI 的动画创建器框架，这样我就可以创建平移、缩放和帧动画。这将使我无需编写太多代码即可轻松创建基本动画。
类似于cocos2d 的cocos studio。
如果你们知道任何这样的框架，请告诉我。谢谢。