Animations are made up of individual images displayed sequentially at certain number of images per second. The images are called frames. Although in traditional animation production all frames needed to be created, with software-based production it is possible to create only important frames, known as keyframes (i.e., frames that represent significant changes in an animation sequence) and let the software calculate the inbetween frames in a process known in the animation field as in- betweening, or tweening, for short. Figure 18.1 illustrates one type of tweening that is sometimes known as motion tweening, in which a filled circle is made bigger as it is moved from one location to another. Basically, to achieve this, the start and end sizes and locations are typically specified and the computer fills in the in-between frames.
Tweening can also be in the form of changing one shape into another, sometimes known as shape tweening. This principle is illustrated in Figure 18.2 and typically involves specifying two shapes and letting the computer fill in the in-between shapes.
CSS enables the creation of animation based on this general principle of creating frames and specifying keyframes and frames per second, except that in CSS, the frames comprise HTML elements and the contents and frame per second (or frame rate) is specified in terms of the amount of time a sequence should take to complete. The principle endures whether animation is 2D or 3D, both of which can be created either by CSS by itself or in combination with scripting. The main benefits of CSS animations are that they make it possible to create basic animations without having to learn to script, and they typically run more smoothly, even on very slow systems.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.