{{animationCSS}}
{{index + 1}} / 3
Notes
- A CSS animation is defined by a sequence of keyframes, which are blocks of CSS styling on the object to animated. CSS interpolates between the provided frames to produce a smooth animation.
- Each keyframe is labeled by a percentage, meaning the keyframe specifies the object's appearance at that point in the animation.
-
The animation is styled using the
animation
CSS property, which specifies the animation's duration, timing, keyframes, and more.
-
The percentages
0%
and100%
have alternate names:from
andto
. -
If the
from
(resp.to
) keyframe is not set, CSS will use the object's normal appearance as the start (resp. end) state of the animation.
- Keyframes need not limit themselves to a single CSS property! Remember, each block specifies a "snapshot" of the object and is allowed the full range of CSS styling.