The MDN animation documentation refers to animation type being discrete. What does this mean?
animation-timing-function. animation-delay. animation-iteration-count. animation-direction.
Definition and Usage The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
Discrete animations proceed from one keyframe to the next without any interpolation.
Think of it the way you normally would think of an animation - one image to the next. Interpolation is inbetweening - filling in space between the main images (in the case of computer graphics these are found from formulas).
In traditional hand-drawn animation, the main artist would produce the keyframes, and an assistant would draw the inbetweens.
So discrete animation is like hand-drawn animation done without the inbetweens of an assistant.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With