可以过渡的CSS属性列表

Question

我正在研究CSS过渡效果，特别是可以过渡的CSS属性及其各自的浏览器支持情况。在谷歌上找不到全面的信息。

我认为并非所有CSS属性都可以过渡。例如， background: 不能，但是 background-color: 和 background-image: 可以。

这是否意味着CSS过渡仅适用于长手写法？或者也许这个例子只是个例外。

有人有可以过渡的属性的全面列表吗？

- user3143218

---

http://www.w3.org/TR/css3-transitions/#animatable-properties - John

你是指浏览器版本之间的元素和属性兼容性，还是动画方面的兼容性？ - Mudassir

我的意思是一个可以被“transition:”属性使用的属性列表。那个w3.org的列表根本不全面。例如，border-radius就不在列表中。请参见这里http://jsfiddle.net/BpgQK/。 - user3143218

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties - Srishti Gupta

Answer 1

这是否意味着CSS过渡仅适用于长手语法？或者说这个例子只是一个例外。 它适用于简写属性，但仅适用于可动画化的特定长手组件。这在CSS Transitions spec中提到。 例如，如果您指定transition-property: background，它将起作用，但仅会对background-color、background-position和background-size以及background-image中的渐变值进行动画处理，并且所有这些都会根据指定的延迟、时间函数和持续时间进行动画处理。 我怀疑要求列出属性的链接可能不是这里讨论的范围，但值得一提的是，MDN包含可动画化属性列表。

对于大多数属性，它们是否以及如何可动画化也在其各自的属性定义（规范）中描述。例如，border-radius 的定义可以在 背景和边框模块 中找到：

可动画化: 作为两个 长度、百分比或计算值。

与 background-image 一样，border-radius 是一个缩写属性，由四个组成部分（每个角一个）组成。您可以通过简单地指定 transition-property: border-radius，以及恰好一个延迟、时间函数和持续时间来以完全相同的方式过渡所有四个角落。

- BoltClock

---

我不确定如何适当地为这个写得很好的答案做出贡献。第三段中CSS转换的链接现在已经重定向，锚点不再有效。MDN有一个名为“可动画化的CSS属性”的页面，https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties。 - Richard Michael

@Richard Michael：看起来他们把那个部分移到了一个名为Web Animations的单独文档中，但是这是一份庞大的文档，所以我会使用你提供的MDN链接。谢谢！ - BoltClock

Answer 2

在npm上有一个基于MDN列表的animatable-properties包。

animatable.propertiesCSS是一个包含所有可动画化属性的CSS格式数组。

你也可以根据Chrome匿名使用统计获得按使用流行度排序的列表。

console.log('First 10 properties by usage statistics:', animatable.popular())
console.log('All properties sorted alphabetically:', animatable.propertiesCSS)

<script src="https://unpkg.com/animatable-properties"></script>

该软件包还提供了每个属性的语法以及验证该语法的能力。

- Ilyich