问题
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?
回答1:
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.
回答2:
There is animatable-properties package on npm based on the MDN list.
animatable.propertiesCSS is an array containing all the animatable properties in CSS format.
You can also get a list of them sorted by usage popularity based on Chrome's anonymous usage statistics.
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>The package also provides syntax for each property and ability to validate that syntax.
来源：https://stackoverflow.com/questions/22879761/list-of-css-properties-that-can-be-transitioned