本文介绍了可以转换的CSS属性列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在研究CSS转换,尤其是可以转换哪些CSS属性及其各自的浏览器支持.努力找到有关Google的全面信息.

我相信并非所有CSS属性都是​​过渡性的.例如,不是 background:,但是是 background-color: background-image:.

这是否意味着CSS过渡仅适用于长期语法?也许这个例子只是个例外.

有人拥有可以转换的属性的完整列表吗?

解决方案

它适用于速记属性,但仅适用于可动画的特定速记组件. CSS Transitions规范中对此进行了提及.>

例如,如果指定 transition-property:background ,则可以使用,但仅 background-color background-position 和将对 background-size 以及 background-image 中的渐变值进行动画处理,并且它们都将根据为背景过渡.

我怀疑请求链接到属性列表可能不在这里,但是对于它的价值, MDN包含可设置动画的属性的列表.

对于大多数属性,它们是否可动画化以及如何动画化也都在其各自的propdef(规范)中进行了描述.例如, border-radius 的定义可以在背景和边框模块:

类似于 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?

解决方案

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:

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属性列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 08:17