Modern websites are designed to be interactive, visually appealing, and engaging. Instead of displaying static content, developers often use animations to attract attention, improve navigation, and create a better user experience. CSS Animations make it possible to animate webpage elements smoothly without relying on JavaScript for basic visual effects.
Animations can be applied to buttons, images, text, icons, menus, loading indicators, banners, and many other webpage components. They help users understand interface changes naturally while making websites feel more responsive and professional.
CSS Animations are powerful because they allow developers to define multiple stages of an animation using keyframes. Unlike CSS Transitions, which require a property change to begin, animations can start automatically and repeat continuously if required.
In this tutorial, you will learn the fundamentals of CSS Animations, understand how animation properties work, and create smooth visual effects using practical examples that follow modern web development standards.
CSS Animations are a feature of modern CSS that allows HTML elements to change their appearance or position automatically over time. Developers define the animation sequence using @keyframes, while various animation properties control how the animation behaves.
Animations can modify many CSS properties such as color, size, position, opacity, rotation, scaling, and more. The browser calculates the intermediate frames automatically, resulting in smooth motion effects.
Unlike CSS Transitions, animations do not require user interaction. They can begin automatically when the webpage loads or when a specific class is applied.
Animations improve the overall quality of a website by making user interactions more natural and visually attractive. Carefully designed motion helps visitors understand changes in the interface and highlights important information without overwhelming the page.
CSS Animations also eliminate the need for many JavaScript-based effects, resulting in cleaner code and improved performance. Since modern browsers optimize CSS animations efficiently, they often provide smoother rendering.
CSS Animations are created using two main parts. First, developers define the animation sequence using the @keyframes rule. Next, the animation is assigned to an element using animation properties.
selector{
animation:animation-name duration;
}
.box{
animation:moveBox 2s;
}
The browser runs the animation named moveBox over a duration of two seconds.
The @keyframes rule defines the different stages of an animation. Each stage specifies how the element should appear at a particular percentage of the animation timeline.
The animation usually starts at 0% and finishes at 100%, although additional intermediate stages such as 25%, 50%, or 75% can also be defined.
@keyframes animationName{
0%{
}
100%{
}
}
@keyframes changeColor{
0%{
background:#0d6efd;
}
100%{
background:#198754;
}
}
During the animation, the background color changes smoothly from blue to green.
The animation-name property specifies which keyframe animation should be applied to an element. The value must match the name defined inside the @keyframes rule.
.box{
animation-name:changeColor;
}
@keyframes rotateLogo{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.logo{
animation-name:rotateLogo;
}
The logo element uses the animation sequence defined by the rotateLogo keyframes.
The animation-duration property specifies how long an animation takes to complete one cycle. The duration can be defined in seconds (s) or milliseconds (ms).
Short durations create quick animations, while longer durations produce slower and more noticeable motion effects.
.box{
animation-duration:2s;
}
.circle{
animation-name:rotateLogo;
animation-duration:3s;
}
The animation completes one full cycle in three seconds.
The following example creates a simple animation that changes both the color and position of a box.
<div class="box"> Animated Box </div>
.box{
width:120px;
height:120px;
background:#0d6efd;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
animation-name:moveBox;
animation-duration:3s;
}
@keyframes moveBox{
0%{
transform:translateX(0);
background:#0d6efd;
}
100%{
transform:translateX(250px);
background:#198754;
}
}
When the webpage loads, the box gradually moves toward the right while its background color changes from blue to green. This example demonstrates how CSS Animations can create smooth motion effects without using JavaScript.
The animation-delay property specifies how long the browser should wait before starting an animation. By default, animations begin immediately when the webpage loads or when the animation is applied. Adding a delay helps developers create sequential animations and improve the visual flow of a webpage.
This property is especially useful when multiple elements appear one after another instead of all at the same time.
.box{
animation-delay:2s;
}
.box{
animation-name:fadeIn;
animation-duration:2s;
animation-delay:1s;
}
In this example, the animation waits for one second before it begins.
The animation-iteration-count property determines how many times an animation should repeat. Developers can specify a fixed number or use the value infinite to keep the animation running continuously.
.box{
animation-iteration-count:3;
}
.loader{
animation-name:spin;
animation-duration:2s;
animation-iteration-count:infinite;
}
The loading icon keeps rotating continuously until the animation is removed.
The animation-direction property controls the direction in which an animation runs. It can play normally, reverse, alternate between directions, or alternate in reverse order.
| Value | Description |
|---|---|
| normal | Runs from beginning to end. |
| reverse | Runs from end to beginning. |
| alternate | Runs forward, then backward repeatedly. |
| alternate-reverse | Runs backward first, then forward repeatedly. |
.box{
animation-name:moveBox;
animation-duration:2s;
animation-direction:alternate;
animation-iteration-count:infinite;
}
The element moves forward and then smoothly returns to its original position in every animation cycle.
The animation-timing-function property defines how the animation speed changes during each cycle. Different timing functions create different motion styles, allowing developers to produce more natural animations.
.circle{
animation-name:bounce;
animation-duration:3s;
animation-timing-function:ease-in-out;
}
The animation starts gently, speeds up in the middle, and slows down before finishing.
The animation-fill-mode property controls the appearance of an element before the animation begins and after it ends. It determines whether the element keeps the styles defined in the keyframes or returns to its original appearance.
.box{
animation-name:slideRight;
animation-duration:2s;
animation-fill-mode:forwards;
}
After the animation finishes, the element remains at its final position instead of returning to its starting point.
The animation-play-state property specifies whether an animation is currently running or paused. This feature is useful when animations should stop temporarily based on user interaction.
animation-play-state:running; animation-play-state:paused;
.box{
animation-play-state:running;
}
.box:hover{
animation-play-state:paused;
}
The animation stops whenever the user places the mouse pointer over the element and continues after the pointer leaves.
Instead of writing several animation properties separately, developers can combine them into a single animation declaration. This keeps the stylesheet shorter and easier to understand.
animation:name duration timing-function delay iteration-count direction;
.box{
animation:moveBox 3s ease-in-out 1s infinite alternate;
}
The shorthand property defines multiple animation settings in a single line of CSS.
The following example creates an animated notification card that gently moves upward while becoming visible. This type of animation is commonly used for alerts, welcome messages, and promotional banners.
<div class="notification"> Welcome to CSE Gyan </div>
.notification{
padding:20px;
background:#0d6efd;
color:white;
animation:showMessage 2s ease forwards;
}
@keyframes showMessage{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
When the page loads, the notification smoothly fades into view while moving upward. This simple animation improves visual appeal and draws the user's attention without being distracting.
CSS Animations are used extensively in modern websites to create engaging, interactive, and visually appealing user experiences. Carefully designed animations guide users through a webpage, highlight important content, and provide immediate visual feedback during interactions.
Unlike decorative effects, well-planned animations improve usability by making interface changes easier to understand. They are commonly used in business websites, e-commerce platforms, educational portals, portfolios, dashboards, and web applications.
Although CSS Animations are optimized by modern browsers, following performance best practices ensures smooth rendering on desktops, tablets, and mobile devices. Efficient animations improve both user experience and website responsiveness.
Animating transform and opacity generally provides better performance because browsers can optimize these properties efficiently.
| CSS Animation | CSS Transition |
|---|---|
| Uses @keyframes to define multiple animation stages. | Animates between two property values. |
| Can start automatically. | Usually requires a property change such as hover. |
| Suitable for complex animations. | Ideal for simple interactive effects. |
| Supports repeated animation cycles. | Runs only when a property changes. |
| Provides greater flexibility and control. | Simpler to implement for basic effects. |
A CSS Animation is a technique that allows webpage elements to change their appearance automatically over time using the @keyframes rule and animation properties.
The @keyframes rule defines different stages of an animation by specifying CSS property values at various percentages of the animation timeline.
The animation-iteration-count property determines how many times an animation repeats.
CSS Animations can run automatically and include multiple animation stages, whereas CSS Transitions animate between two states after a property changes.
The transform and opacity properties are recommended because they generally provide better browser performance.
| Animation Property | Purpose |
|---|---|
| animation-name | Specifies the keyframe animation to apply. |
| animation-duration | Defines how long one animation cycle lasts. |
| animation-delay | Specifies the waiting time before the animation starts. |
| animation-iteration-count | Controls the number of animation repetitions. |
| animation-direction | Determines the direction of animation playback. |
| animation-timing-function | Controls the animation speed pattern. |
| animation-fill-mode | Defines how styles are applied before and after the animation. |
| animation-play-state | Starts or pauses the animation. |
| animation | Shorthand property combining all animation settings. |
CSS Animations are an essential feature of modern web development, allowing developers to create dynamic and engaging user interfaces without relying heavily on JavaScript. By mastering concepts such as @keyframes, animation-name, animation-duration, animation-delay, and other animation properties, you can build websites that are visually appealing, interactive, and user-friendly.
When used thoughtfully, CSS Animations improve navigation, highlight important information, enhance responsiveness, and create memorable user experiences. Combined with technologies such as CSS Flexbox, CSS Grid, and Responsive Web Design, animations help developers build professional websites that meet modern web standards.