Animations get purged if using step-start or step-end timing function

[timkley]

What version of Tailwind CSS are you using?

v2.2.2

What build tool (or framework if it abstracts the build tool) are you using?

@symfony/webpack-encore": ^1.3.0

What version of Node.js are you using?

v12.0.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/P8QHN8mDNy?file=config

Describe your issue

When using step-start or step-end as animation-timing-function (see MDN for possible built in values) the animation won't work because parseAnimationValue won't return anything.

I'd be happy to provide a PR to fix this 👍🏻

[hug963]

Seems to be same issue as #4737

[timkley]

@hug963 I saw your issue and I think it's kinda related. In case of step-start / step-end it should be as easy as updating the timings constant and add those values: https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/parseAnimationValue.js#L5

Your case needs to be handled a little different, I'd expect a new regex needs to be added to the function.