Hi,
I don’t undestand how to create a simple step animation for a button that should alternate between two colors.
I’m able to make a linear animation between the two colors but when I try to use step-start or step-end it just sets on the first or the second color.
Without specifying a @keyframes set of functions, steps() will not work. Perspective does not allow for insertion of custom JavaScript (which is how you would provide rules in keyframes) at this time, so you have no way to provide these functions which would control your step logic.
Try using this as a custom transition curve (Timing):
cubic-bezier(1,0,0,1);
It’ll still smoothly transition, but should transition more quickly
Double check that format is correct by selecting “exaggerate” from the drop down list.
You can also emulate this in your styles by creating 4 animation key frames, the inner two in the centre.
I’m sure you solutions are all valid, but I managed to brute force it using the step-start: to create a a two state animation I created three steps: the first two have the same colors scheme while the third is different. After the first cycle the animation alternates between the second and the third step. It seems to work.
