✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Animated Background Using CSS3

Last Updated : Jul 1, 2023

IN - CSS3 HTML | Written & Updated By - Anjali

In this tutorial we will show you how to create animated background using CSS3. Whenever user opens the webpage the background image of a webpage scrolls from right to left it looks very beautiful it gave moving effect to the user.

You may also like change background with animation using CSS3.

Create Animated Background Using CSS3

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Animated Background It Takes Only One Step:-

  1. Make a HTML file and define markup and styling

Step 1. Make a HTML file and define markup and styling

We make a HTML file and save it with a name animate.html 

<html>
<head>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
#animated_div
{
width: 100%;
height: 100%;
background: url(images/animated_background.jpg) repeat-x;
background-size:cover;
-webkit-animation: animatebackground 60s linear infinite;
animation: animatebackground 60s linear infinite;
-ms-animation: animatebackground 60s linear infinite;
-moz-animation: animatebackground 60s linear infinite;
}
@keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-webkit-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-ms-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-moz-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
#animated_div h1
{
 color:white;
 padding-top:100px;
 font-size:50px;
}
#animated_div h1 p
{
 font-size:20px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="animated_div">
  <h1>Animated Background Using CSS3</h1>
 </div>
</div>
</body>
</html>

In this step create a div which is animated div which scrolls from right to left.In our CSS we set background image to animated div and then use CSS3 animaton to scroll the div from right to left.

Then we use CSS3 keyframes and set the movement from 0 to -1000px so that the images first move to -1000px then start again you can use any number but it is recommended to use higher number to avoid quick restart.

You may also like move elements on page scroll using jQuery.

Thats all, this is how to create animated background using CSS3 and HTML. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on animated background css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪