0

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

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

waapi 是Css Animation的子集吗?

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

4

1 回答 1

2

为了简单地回答您的问题,可动画的 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(),添加任何已注册的自定义属性,可能删除任何前缀属性,转换offsetcssOffset,然后将它们全部运行setKeyframes()/getKeyframes()到查看浏览器支持动画的那些。

于 2019-11-11T03:47:40.147 回答