How to force css animation to run to the end?

Question

css

So it goes.
:hover { transition: 1s ease-out 1s }
This CSS is processed in such a way that if you remove the mouse from the element during the animation, it will freeze in one state for 1s and only then return to the native state. This looks disgusting.
How can I make it so that either the animation runs to the end, or, if it does not end, there is no delay of 1s?

Answer 1

set animation not on hover but on the element itself