Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animated background with CSS
CSS animated backgrounds allow you to create dynamic visual effects by changing background properties over time. The @keyframes rule defines the animation sequence, while the animation property applies it to elements.
Syntax
@keyframes animation-name {
from { background: initial-state; }
to { background: final-state; }
}
selector {
animation: animation-name duration timing-function iteration-count;
}
Example: Color Transition Animation
The following example demonstrates a smooth background color transition that cycles through different colors −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-bg {
width: 400px;
height: 200px;
border-radius: 10px;
animation: colorChange 4s infinite;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
}
@keyframes colorChange {
0% { background: #ff6b6b; }
25% { background: #4ecdc4; }
50% { background: #45b7d1; }
75% { background: #f9ca24; }
100% { background: #ff6b6b; }
}
</style>
</head>
<body>
<div class="animated-bg">Animated Background</div>
</body>
</html>
A rounded rectangle smoothly transitions through red, teal, blue, and yellow background colors in a 4-second cycle, with white centered text "Animated Background".
Example: Gradient Movement Animation
This example creates a moving gradient effect by animating the background position −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-bg {
width: 400px;
height: 150px;
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
</head>
<body>
<div class="gradient-bg">Moving Gradient</div>
</body>
</html>
A blue-to-purple gradient smoothly moves across the element, creating a flowing, animated background effect with white centered text.
Key Animation Properties
| Property | Description |
|---|---|
animation-duration |
Time the animation takes to complete one cycle |
animation-iteration-count |
Number of times the animation repeats (use infinite for continuous) |
animation-timing-function |
Speed curve of the animation (ease, linear, ease-in-out) |
Conclusion
CSS animated backgrounds enhance user experience by adding visual interest. Combine @keyframes with various background properties like color, gradients, or positioning to create engaging effects that run smoothly in modern browsers.
Updated on: 2026-03-15T13:24:20+05:30
704 Views
Advertisements