🎯 CSS animation Property

The animation property is a CSS shorthand property that allows you to define all animation settings in a single declaration. Instead of writing multiple animation-related properties separately, you can combine them into one concise line of code.

CSS animations make it possible to create engaging effects such as movement, fading, scaling, rotation, color changes, and many other visual transformations without using JavaScript.

The animation shorthand combines several individual CSS animation properties:

• animation-name → Defines which animation to run.
• animation-duration → Sets how long the animation lasts.
• animation-timing-function → Controls the animation speed curve.
• animation-delay → Specifies a delay before the animation starts.
• animation-iteration-count → Determines how many times the animation repeats.
• animation-direction → Defines the playback direction.
• animation-fill-mode → Controls element styles before and after the animation.
• animation-play-state → Specifies whether the animation is running or paused.

The default values of the animation property are:

animation:
none
0s
ease
0s
1
normal
none
running;
                

These defaults mean that no animation is applied unless you explicitly define one.

Defines one or more animation settings in a single line.

.box {
    animation: slide 2s ease-in-out 0.5s infinite;
}
                

In this example:

• slide → Animation name
• 2s → Duration
• ease-in-out → Timing function
• 0.5s → Delay
• infinite → Repeat forever

Resets the animation property and all its sub-properties to their default values.

.box {
    animation: initial;
}
                

The following example creates a simple animation that moves an element horizontally.

.box {
    animation: moveBox 3s ease-in-out infinite;
}

@keyframes moveBox {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}
                

The element continuously moves from left to right and repeats the animation forever.

The animation shorthand property simplifies animation management and keeps CSS code cleaner and easier to maintain.

• Create advanced visual effects without JavaScript
• Combine all animation settings in one line
• Improve user engagement and interactivity
• Build modern and dynamic web interfaces
• Reduce repetitive CSS code