CSS animation consist of two building blocks: key frames and animation properties. Keyframes are the basics of CSS animations as they define the look of animation at its every stage. The animation properties are added after that as they enable the animation to function. They are added to CSS selectors as they assign the keyframes to the elements you wish to animate and they also define how they are animated. You can add multiple animations to one element, control when the animation is played and when it is paused, change the cycles of it and much more.
Whether you want to use GIFS, WebGL, SVGs, or background videos, CSS animations can really bring life to your site when done properly.