Maintaining the final state at end of a CSS animation

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode