CSS transitions & animations

[LeaVerou]

• Which properties are most commonly transitioned? How many of those are not iterpolatable?
• Stats (avg, median, mode) about durations
• Most common timing functions? Timing functions by property?
• Common animation names

[LeaVerou]

Algorithm:

• To find transitioned properties, inspect values of transition-property, and match values of transition by \s(d|r|[cr]?x|[cr]?y|[a-z-]{3,})\s. Exclude timing function keywords. Count incidence.
• To find duration, inspect values of transition-duration, animation-duration, as well as the first <time> value in transition and animation.
• To find timing functions, inspect values of transition-timing-function, animation-timing-function, as well as calls to steps() and cubic-bezier() and keywords (ease(-in)?(-out)?|linear|step-start|step-end) in transition and animation
• For the animation name, it's easier to get it from rules with type: "keyframes", it's in rule.name.

I think we may need to drop timing functions by property, as it's hard to measure reliably in the general case.