可以转换的CSS属性列表 [英] List of CSS Properties That Can Be Transitioned
问题描述
我正在研究CSS转换，尤其是可以转换哪些CSS属性及其各自的浏览器支持.努力找到有关Google的全面信息.
我相信并非所有CSS属性都是过渡性的.例如，不是 background:，但是是 background-color:和 background-image:.
这是否意味着CSS过渡仅适用于长期语法?也许这个例子只是个例外.
有人拥有可以转换的属性的完整列表吗?
这是否意味着CSS过渡仅适用于长期语法?也许这个例子只是个例外.
它适用于速记属性，但仅适用于可动画的特定速记组件. CSS Transitions规范中对此进行了提及.>
例如，如果指定 transition-property:background ，则可以使用，但仅 background-color ， background-position 和将对 background-size 以及 background-image 中的渐变值进行动画处理，并且它们都将根据为背景过渡.
我怀疑请求链接到属性列表可能不在这里，但是对于它的价值，背景和边框模块:
可动画设置:作为 length的两个值，百分比或计算
类似于 background-image ， border-radius 是一种简写属性，由四个部分组成(每个角一个).您只需指定 transition-property:border-radius ，并指定一个延迟，计时功能和持续时间，就可以完全相同的方式过渡所有四个角.
I'm looking at CSS transitions, in particular which CSS properties can be transitioed and their respective browser support. Struggling to find anything comprehensive on google.
I believe that not all CSS properties are transitional. For example, background: isn't, but background-color: and background-image: are.
Would this mean that CSS transitions only work on long-hand syntax? Or perhaps this example is just an exception.
Does anyone have a comprehensive list of properties that can be transitioned?
Would this mean that CSS transitions only work on long-hand syntax? Or perhaps this example is just an exception.
It works on shorthand properties, but only for specific longhand components that are animatable. This is mentioned in the CSS Transitions spec.
If you specify transition-property: background, for example, it will work, but only background-color, background-position and background-size, as well as gradient values in background-image, will be animated, and they will all animate according to the delay, timing function and duration specified for the background transition.
I suspect asking for links to lists of properties might be off-topic here, but for what it's worth, MDN contains a list of animatable properties.
For most properties, whether or not — and how — they're animatable is also described in their respective propdefs (specifications). For example, the definition of border-radius can be in the Backgrounds and Borders module:
Animatable: as two values of length, percentage, or calc
Like background-image, border-radius is a shorthand property, made up of four components (one for each corner). You can transition all four corners the exact same way by simply specifying transition-property: border-radius, and exactly one delay, timing function and duration.
这篇关于可以转换的CSS属性列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
