时间戳

首页 > 解决方案 > 什么是 waapi 有效的 css 属性

javascript - 什么是 waapi 有效的 css 属性

问题描述

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

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

waapi 是Css Animation的子集吗？

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

标签： javascriptcssanimationweb-animations

解决方案

为了简单地回答您的问题，可动画的 CSS 属性集没有区别。从技术上讲，CSS 动画是 Web 动画的一个子集。

DOM 中没有动画属性列表。要确定属性是否可动画，您可以创建动画，或在现有动画上设置关键帧（使用setKeyframes()），然后使用 读回关键帧getKeyframes()以查看它是否出现在那里。

这就是摘要，但这里还有几点可能会很有趣，具体取决于您要执行的操作：

  • 可以通过 CSS 过渡设置动画的属性集是可以通过 CSS 动画和 Web 动画进行动画处理的属性的子集。这些被称为可转换属性。

  • 可以通过 Web 动画设置动画的属性集在技术上是可以通过 CSS 动画设置动画的属性的子集，但实际上它们是相同的（尽管请参阅下一点）。例如，将来 Web 动画可能能够为display属性设置动画，但 CSS 动画将永远无法这样做。

  • Web 动画在技术上允许对前缀属性进行动画处理，但 Safari 和 Chrome 不支持这一点，而 Firefox 和规范可能会更改以匹配。（有关更多详细信息，请参阅此规范问题。）

  • 注册的自定义属性也可以通过 Web Animations 进行动画处理，尽管这并不是在任何地方都实现的。

  • 一些属性在 Web 动画关键帧中使用时具有特殊名称以避免冲突，特别是cssFloat（对于“float”）和cssOffset（对于“offset”）。

因此，要生成可动画属性的完整列表，您可能需要查看在 的结果中公开的属性 getComputedStyle()，添加任何已注册的自定义属性，可能删除任何前缀属性，转换offset为cssOffset，然后将它们全部运行setKeyframes()/getKeyframes()到查看浏览器支持动画的那些。

推荐阅读