CSS Animation
CSS animations allow for the creation of dynamic and engaging effects on web pages. They can be used to bring elements to life by applying transitions and keyframes.
To create an animation in CSS, follow these steps:
-
Define the Keyframes: Start by defining the keyframes using the
@keyframesrule. Inside the keyframes block, specify the style changes at different points of the animation. -
Apply the Animation: Next, apply the animation to an element using the
animationproperty. Set theanimation-nameto the name of the keyframes you defined. You can also specify other properties likeanimation-duration,animation-timing-function,animation-delay, and more to control the animation's timing and behavior. -
Customize Animation Properties: Further customize the animation by modifying other animation properties such as
animation-iteration-count(to specify the number of times the animation repeats),animation-direction(to control the direction of the animation), andanimation-fill-mode(to define how the animation styles are applied before and after the animation).
By combining keyframes and animation properties, you can create a wide range of effects, including smooth transitions, transformations, fades, and more.
CSS animations provide a powerful way to enhance the visual appeal and interactivity of web pages without relying on external plugins or frameworks.
Animation properties
Following table provides a brief overview of all the animation-related properties:-
|
Property |
Description |
|
animation |
A shorthand property for setting all the animation properties in single declaration. |
|
animation-name |
Specifies the name of @keyframes defined animations that should be applied to the selected element. |
|
animation-duration |
Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation. |
|
animation-timing-function |
Specifies how the animation will progress over the duration of each cycle i.e. the easing functions. |
|
animation-delay |
Specifies when the animation will start. |
|
animation-iteration-count |
Specifies the number of times an animation cycle should be played before stopping. |
|
animation-direction |
Specifies whether or not the animation should play in reverse on alternate cycles. |
|
animation-fill-mode |
Specifies how a CSS animation should apply styles to its target before and after it is executing. |
|
animation-play-state |
Specifies whether the animation is running or paused. |
|
@keyframes |
Specifies the values for the animating properties at various points during the animation |
Defining keyframes
Keyframes are used to specify the values for the animating properties at various stages of the animation. These are specified using a specialized CSS at-rule — @keyframes.
The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.
Input:-
Output:-
Animation shorthand property
There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.
Input:-
Output:-
