How to continue css animation from the current moment?

Question

css

Hello.
I have an infinite animation in CSS for an element (animation: infinite )
Clicking on the button should play another animation for this element, which is already finite.
If this is implemented by changing the css class, then it turns out that the element "twitches", since the new animation does not start from the positions in which the element is at the moment the button is pressed.
Can you please tell me if this can be implemented with a smooth transition?