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

Question

列出的通用 Animatable CSS 属性是否存在差异 here ？

Certain CSS properties can be animated using CSS Animations or CSS Transitions. Animation means that their values can be made to change gradually over a given amount of time.

waapi 是Css Animation 的子集吗？ ？

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

Answer 1

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

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

这就是总结，但根据您要尝试做的事情，这里还有一些可能会很有趣的要点:

• 可由 CSS 转换动画的属性集是可由 CSS 动画和 Web 动画动画的属性集的子集。这些被称为 transitionable properties .

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

• Web 动画在技术上允许对前缀属性进行动画处理，但 Safari 和 Chrome 不支持此功能，而 Firefox 和规范可能会更改以匹配。 (有关更多详细信息，请参阅 this spec issue。)

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

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

因此，要生成一个完整的可动画属性列表，您可能需要看看暴露在诸如结果之类的东西上的属性getComputedStyle()，添加任何已注册的自定义属性，可能会删除任何前缀属性，将 offset 转换为 cssOffset，然后通过 setKeyframes()/getKeyframes() 查看浏览器支持哪些动画。