I have created a JavaScript function that needs to extract CSS values, even those that may contain multiple values. For instance, margin:0 0 4px 12px;
consists of four separate values (margin-top, margin-right, etc).
Specifically, I am looking for a list of shorthand properties in CSS that are potentially animatable (such as rgb, px, em, etc). I am not interested in all shorthand css properties, only the ones that can be animated. For example, I do not need border:1px solid black;
as I cannot animate 'solid.' However, I do require border-width
, since it represents the width of all four borders.
The list of properties I currently have includes:
- border-width
- background-position
- padding
- margin
- border-radius
- box-shadow
- outline-radius
- border-color
- border-colors
- text-shadow
- font
Have I missed any properties? I am unsure if there are any obscure properties like:
mystery-color:red green blue hazel pigbreath;