regex for decomposing transition css declarations (using this in the arc menu widget)

gistfile1.txt

(.*)(left|top|opacity|height|width|transform|-webkit-transform)\s*(initial|\s*-?[0-9]*\.?[0-9]*m?s?)\s*(initial|linear|ease(?:-in|-out|-in-out)?|cubic-bezier\((?:\s*-?[0-9]*?\.?[0-9]*?\s*,?)*?\))?(initial|\s*-?[0-9]*\.?[0-9]*m?s?)?(.*)

Decomposing CSS3 Transition declarations

I had a few behavioural issues modifying attributes individually when dealing with elements which had multiple properties in transition. So I put this together to help me decompose the transition so that I could update the attribute for the property I wanted and re-assign the whole transition rule back with $(el).css("transition", updatedCssStatement)

(.*)(left|top|opacity|height|width|transform|-webkit-transform)\s*(initial|\s*-?[0-9]*\.?[0-9]*m?s?)\s*(initial|linear|ease(?:-in|-out|-in-out)?|cubic-bezier\((?:\s*-?[0-9]*?\.?[0-9]*?\s*,?)*?\))?(initial|\s*-?[0-9]*\.?[0-9]*m?s?)?(.*)

Capture Groups

Previous Statements

(.*)

This catches statements for other properties previous to this one in the transition rule.

Property

(left|top|opacity|height|width|transform|-webkit-transform)

This captures the transition-property specified in the rule. If you are dealing with multiple properties, change this to only be the one you want to modify to match only that statement.

Duration

(initial|\s*-?[0-9]*\.?[0-9]*m?s?)

This captures the transition-duration

Timing Function

(initial|linear|ease(?:-in|-out|-in-out)?|cubic-bezier\((?:\s*-?[0-9]*?\.?[0-9]*?\s*,?)*?\))

This captures the transition-timing-function, eg. linear, ease, ease-in, ease-out, cubic-bezier

Delay

(initial|\s*-?[0-9]*\.?[0-9]*m?s?)

This captures the transition-delay

Other Statements

(.*)

This catches statements for other properties after this one in the transition rule.