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,
Try using this as a custom transition curve (Timing):
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.