CSS background image loop animation

CSS Background Image Loop Animation

In web design, the use of background https://coder-cafe.com/wp-content/uploads/2025/09/images can make the page more beautiful and attractive. CSS animations can give background https://coder-cafe.com/wp-content/uploads/2025/09/images a more vivid and elegant dynamic effect. This article will detail how to use CSS to create looping background image animations.

1. Using the CSS3 animation property

The CSS3 animation property is key to creating animations. By defining animation properties, you can control animation parameters such as duration, speed, and number of loops, creating a variety of cool animation effects.

1.1 animation-duration

The

animation-duration property sets the animation duration in seconds (s) or milliseconds (ms).

.animation {
animation-duration: 2s; /* The animation duration is 2 seconds */
}

1.2 animation-timing-function

The

animation-timing-function property sets the animation’s speed curve. Common values include ease (slow-fast-slow) and linear (constant speed).

.animation {
animation-timing-function: ease; /* Sets the animation speed curve to slow-fast-slow */
}

1.3 animation-iteration-count

The

animation-iteration-count property sets the number of iterations for the animation. It can be an integer or infinite (infinite loop).

.animation {
animation-iteration-count: infinite; /* Infinite animation loop */
}

1.4 animation-direction

The

animation-direction property sets the animation’s direction. Common values include normal (forward playback) and reverse (reverse playback).

.animation {
animation-direction: normal; /* Play in forward order */ 
}

2. Implementing a looping background image animation

2.1 HTML Structure

First, we need to add a div container with the animation effect to the HTML and set a class for styling.

<div class="background-animation"></div>

2.2 CSS Style

Next, we use CSS to define the animation style. We need to set the background-image property to specify the background image, and define the keyframes of the animation through the keyframes keyword.

.background-animation { 
width: 100%; 
height: 100vh; 
background-image: url('your-https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg');
background-size: cover;
animation: slide 10s infinite linear;
}

@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}

In the code above, we define a keyframe animation named slide from background-position: 0 0; to background-position: 100% 0;, which represents the background image sliding horizontally from left to right in a linear motion. Using the animation property, we apply the slide animation to the .background-animation container and set the animation duration to 10 seconds, the number of loops to infinite, and the speed curve to linear.

2.3 Running Results

Apply the above code to an HTML page and check the result. You’ll notice that the background image will slide horizontally and loop infinitely, creating an elegant and dynamic background effect.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Background Animation</title> 
<style> 
.background-animation { 
width: 100%; 
height: 100vh; 
background-image: url('your-https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg'); 
background-size: cover; 
animation: slide 10s infinite linear; 
} 

@keyframes slide { 
0% { 
background-position: 0 0; 
} 
100% { 
background-position: 100% 0; 
} 
} 
</style> 
</head> 

<body> 
<div class="background-animation"></div> 
</body> 

</html>

3. Summary

Through the above steps, we successfully implemented a looping background image animation using CSS animation. By properly setting the animation property and keyframes, we can create more vivid and elegant dynamic effects in web design and enhance the user experience.