什么是 waapi 有效 css 属性

What are the waapi valid css properties

列出的通用 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 中是否列出了这些属性?或者我必须复制那些来检查字符串是否是 属性?

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

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

这是总结,但根据您要执行的操作,这里还有一些可能会很有趣的要点:

  • 可由 CSS 过渡设置动画的属性集是可由 CSS 动画和 Web 动画设置动画的属性集。这些被称为 transitionable properties.

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

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

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

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

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