CSS Animations : Keyframes and Animation Properties

CSS Animations : Keyframes and Animation Properties

One effective technique to give web objects movement and vitality is with CSS animations. An animation, as opposed to a transition, can have numerous phases of change, not just a beginning and a conclusion, and can alter one or more CSS attributes continually. CSS animations can be managed using several animation attributes and @keyframes tags.

Keyframes

CSS animations start with @keyframes. It serves the purpose of specifying the styles that will be used throughout the animation at different stages. For every point in the animation sequence, from start (0%) to end (100%), there is a corresponding percentage that defines it. Keyframe counts are unlimited as long as they serve the intended purpose.

Animation Properties

CSS animation properties determine the behavior of an animation. Important animation properties to consider are;

•  animation name; Connects the animation to a set of @keyframes.
•  animation duration; Specifies the duration it takes for the animation to complete one cycle.
•  animation timing function; Controls how the animation progresses during its duration, such, as linear, ease in or ease out.
•  animation delay; Pauses the start of the animation.
•  animation iteration count; Indicates how times the animation will repeat.
•  animation direction; Decides whether the animation should reverse its direction.
•  animation fill mode; Defines which values are applied by the animation before and after it runs.