How do I prevent a CSS animation from changing an element back to its original style or position?

Answer 1

Animations will return to the position and style that was declared in the #id or .class. To override this: use the 'animation-fill-mode' property. This controls which keyframe of the animation is displayed while the animation is not playing. Use properties 'backwards' to display the first keyframe of the animation until the animation starts, 'forwards' to display the last keyframe of the animation after the animation ends, or 'both' to ignore the #id or .class CSS and only use data from the first and last keyframe. #id { animation-fill-mode: forwards; }